.lcs-wrapper {
    position: fixed;
    inset: 0;

    z-index: 1000;

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

    padding: 24px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #0a2a43 0%,
            #09103f 100%
        );

    font-family:
        Inter,
        Sora,
        Arial,
        sans-serif;
}

.lcs-panel {
    width: min(
        680px,
        100%
    );

    padding: 32px;

    box-sizing: border-box;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #102b3d,
            #0d2332
        );

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

    box-shadow:
        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.4
        );

    color: #ffffff;
}

.lcs-header {
    text-align: center;
}

.lcs-eyebrow {
    margin-bottom: 8px;

    color: #8fa9b8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.lcs-title {
    font-size: 32px;
    font-weight: 800;

    line-height: 1.2;
}

.lcs-performance {
    display: inline-flex;

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

    margin-top: 18px;

    padding: 9px 24px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #2ecc71,
            #27ae60
        );

    box-shadow:
        0 8px 24px
        rgba(
            46,
            204,
            113,
            0.2
        );

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.lcs-stats {
    display: grid;

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

    gap: 14px;

    margin-top: 28px;
}

.lcs-stat {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 76px;

    padding: 16px;

    box-sizing: border-box;

    border-radius: 14px;

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

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );
}

.lcs-stat-icon {
    display: flex;

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

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background:
        #1c4559;

    color: #f1c40f;

    font-size: 19px;
    font-weight: 800;
}

.lcs-stat-label {
    display: block;

    margin-bottom: 4px;

    color: #8fa9b8;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.lcs-stat-value {
    display: block;

    color: #ffffff;

    font-size: 21px;
    font-weight: 800;

    line-height: 1.1;
}

.lcs-actions {
    display: grid;

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

    gap: 12px;

    margin-top: 26px;
}

.lcs-button {
    min-height: 52px;

    border: 0;

    border-radius: 12px;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.lcs-button:hover {
    filter: brightness(1.08);
}

.lcs-button:active {
    transform: translateY(1px);
}

.lcs-retry {
    background: #1c4559;
    color: #ffffff;
}

.lcs-continue {
    background:
        linear-gradient(
            135deg,
            #2ecc71,
            #27ae60
        );

    color: #ffffff;
}

.lcs-level-select {
    background: #16384b;
    color: #ffffff;
}

.lcs-main-menu {
    background: #0d2332;
    color: #ffffff;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

@media (max-width: 600px) {

    .lcs-wrapper {
        padding: 16px;
    }

    .lcs-panel {
        padding: 24px;
    }

    .lcs-title {
        font-size: 27px;
    }

    /*
     * Intentionally remains two columns
     * in portrait mode.
     */
    .lcs-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .lcs-stat {
        min-height: 70px;

        padding: 12px;

        gap: 9px;
    }

    .lcs-stat-icon {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;

        border-radius: 9px;

        font-size: 15px;
    }

    .lcs-stat-label {
        font-size: 9px;
    }

    .lcs-stat-value {
        font-size: 17px;
    }

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

@media (max-width: 420px) {

    .lcs-panel {
        padding: 18px;
    }

    .lcs-title {
        font-size: 24px;
    }

    .lcs-stats {
        gap: 8px;
    }

    .lcs-stat {
        min-height: 66px;

        padding: 9px;

        gap: 7px;
    }

    .lcs-stat-icon {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        font-size: 13px;
    }

    .lcs-stat-label {
        font-size: 8px;
    }

    .lcs-stat-value {
        font-size: 15px;
    }

    .lcs-actions {
        gap: 8px;
    }

    .lcs-button {
        min-height: 46px;

        font-size: 12px;
    }
}