@import "_theme.scss";

MessageOverlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    font-family: $font-display;
    color: $ink;
    z-index: 50;

    .overlay {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
    }

        .overlay.serve {
            pointer-events: all;
            cursor: pointer;
            transition: opacity 0.3s ease-out;
        }

            .overlay.serve:intro {
                opacity: 0;
            }

            .overlay.serve:outro {
                opacity: 0;
                transition: opacity 0.25s ease-in;
            }

        .overlay.over {
            pointer-events: all;
            background-color: $cream;
            background-image-tint: $cream;
            background-image: url('textures/ui/background_dot_01.png');
            transition: opacity 0.3s ease-out;
        }

            .overlay.over:intro {
                opacity: 0;
            }

            .overlay.over:outro {
                opacity: 0;
                transition: opacity 0.25s ease-in;
            }

    .over-layout {
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 32px;
    }

    .over-results {
        flex-grow: 1;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 120px 60px 100px 100px;
    }

    .over-board {
        width: 1020px;
        padding: 36px 56px 36px 0;
        align-items: center;
        justify-content: center;
        animation-name: msg-pop;
        animation-duration: 0.5s;
        animation-timing-function: bounce-out;
        animation-delay: 0.12s;
        animation-fill-mode: backwards;
    }

    .serve-card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 56px 90px;
        animation: msg-card 0.45s bounce-out;
    }

    .serve-title {
        font-family: $font-display;
        font-weight: 800;
        font-size: 84px;
        color: $white;
        text-stroke: 18px $ink;
    }

    .serve-hint {
        margin-top: 10px;
        font-family: $font-body;
        font-weight: 700;
        font-size: 28px;
        letter-spacing: 2px;
        color: $white;
        text-stroke: 18px $ink;
    }

    .card {
        flex-direction: column;
        align-items: center;
        animation: msg-card 0.5s bounce-out;
    }

    .badge {
        position: relative;
        top: -30px;
        right: -20px;
        background-color: $red;
        color: $white;
        font-family: $font-display;
        font-weight: 800;
        font-size: 28px;
        padding: 14px 32px;
        border: 6px solid $ink;
        border-radius: 20px;
        box-shadow: 7px 7px 0 $ink;
        transform: rotate( 6deg );
        animation-name: msg-badge;
        animation-duration: 0.4s;
        animation-timing-function: bounce-out;
        animation-delay: 0.3s;
        animation-fill-mode: backwards;
    }

    .tile-row {
        flex-direction: row;
        justify-content: center;
        gap: 14px;
        margin-bottom: 24px;
        animation-name: msg-pop;
        animation-duration: 0.45s;
        animation-timing-function: bounce-out;
        animation-delay: 0.1s;
        animation-fill-mode: backwards;
    }

    .tile {
        width: 104px;
        height: 110px;
        align-items: center;
        justify-content: center;
        transition: transform 0.32s bounce-out;
    }

    .tile-face {
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        border: 6px solid $ink;
        border-radius: 22px;
        box-shadow: 8px 8px 0 $ink;
        font-family: $font-display;
        font-weight: 800;
        font-size: 74px;
        color: $ink;
        pointer-events: all;
        cursor: pointer;
        transition: box-shadow 0.12s ease-out;
    }

        .tile-face:hover {
            box-shadow: 11px 11px 0 $ink;
        }

        .tile-face:active {
            sound-in: "ui.button.press";
        }

        .tile-face.hit-a {
            animation: tile-pop-a 0.42s bounce-out;
        }

        .tile-face.hit-b {
            animation: tile-pop-b 0.42s bounce-out;
        }

    .over-word {
        font-family: $font-display;
        font-weight: 800;
        font-size: 56px;
        letter-spacing: 3px;
        color: $ink;
        margin-bottom: 34px;
        animation-name: msg-pop;
        animation-duration: 0.45s;
        animation-timing-function: bounce-out;
        animation-delay: 0.18s;
        animation-fill-mode: backwards;
    }

    .stats {
        flex-direction: row;
        justify-content: center;
        gap: 22px;
        margin-bottom: 40px;
        animation-name: msg-pop;
        animation-duration: 0.45s;
        animation-timing-function: bounce-out;
        animation-delay: 0.26s;
        animation-fill-mode: backwards;
    }

    .stat-card {
        flex-direction: column;
        align-items: center;
        width: 260px;
        background-color: $cream;
        border: 5px solid $ink;
        border-radius: 22px;
        box-shadow: 6px 6px 0 $ink;
        padding: 22px 10px;
    }

    .stat-label {
        font-family: $font-body;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 2px;
        color: rgba( $ink, 0.7 );
    }

    .stat-val {
        font-family: $font-display;
        font-weight: 800;
        font-size: 60px;
        color: $ink;
    }

    .buttons {
        flex-direction: row;
        justify-content: center;
        gap: 22px;
        animation-name: msg-pop;
        animation-duration: 0.45s;
        animation-timing-function: bounce-out;
        animation-delay: 0.34s;
        animation-fill-mode: backwards;

        &:hover {
            sound-in: "ui.button.over";
        }

        &:active {
            sound-in: "ui.button.press";
        }
    }

    .btn {
        pointer-events: all;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        font-family: $font-display;
        font-weight: 800;
        font-size: 30px;
        color: $ink;
        border: 6px solid $ink;
        border-radius: 22px;
        box-shadow: 8px 8px 0 $ink;
        padding: 18px 40px;
        cursor: pointer;
        transition: all 0.08s ease-out;
    }

        .btn:hover {
            transform: translate( -3px, -3px );
            box-shadow: 11px 11px 0 $ink;
        }

        .btn.play-again {
            background-color: $green;
        }

        .btn.menu-btn {
            background-color: $white;
        }
}

@keyframes msg-card {
    0% {
        transform: translateY( 40px ) scale( 0.85 );
        opacity: 0;
    }
    100% {
        transform: translateY( 0px ) scale( 1 );
        opacity: 1;
    }
}

@keyframes msg-pop {
    0% {
        transform: translateY( 20px ) scale( 0.92 );
        opacity: 0;
    }
    100% {
        transform: translateY( 0px ) scale( 1 );
        opacity: 1;
    }
}

@keyframes msg-badge {
    0% {
        transform: rotate( 6deg ) scale( 0 );
        opacity: 0;
    }
    100% {
        transform: rotate( 6deg ) scale( 1 );
        opacity: 1;
    }
}

@keyframes tile-pop-a {
    0% {
        transform: rotate( 0deg );
    }
    30% {
        transform: rotate( -10deg );
    }
    60% {
        transform: rotate( 6deg );
    }
    100% {
        transform: rotate( 0deg );
    }
}

@keyframes tile-pop-b {
    0% {
        transform: rotate( 0deg );
    }
    30% {
        transform: rotate( 10deg );
    }
    60% {
        transform: rotate( -6deg );
    }
    100% {
        transform: rotate( 0deg );
    }
}