/* BACKGROUND SVG */
/*  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c392.575C101.07%2c410.428%2c199.744%2c497.731%2c294.449%2c458.172C387.553%2c419.282%2c406.859%2c296.73%2c448.967%2c205.037C491.167%2c113.144%2c564.714%2c20.471%2c540.547%2c-77.719C516.456%2c-175.602%2c403.273%2c-217.053%2c328.454%2c-284.607C263.922%2c-342.873%2c216.408%2c-429.376%2c131.314%2c-447.216C47.405%2c-464.807%2c-25.952%2c-390.28%2c-110.595%2c-376.652C-212.899%2c-360.181%2c-336.277%2c-427.077%2c-414.667%2c-359.311C-491.076%2c-293.258%2c-461.893%2c-168.137%2c-468.396%2c-67.345C-474.397%2c25.656%2c-495.521%2c124.081%2c-451.145%2c206.031C-407.625%2c286.401%2c-318.875%2c329.831%2c-234.414%2c364.755C-160.196%2c395.444%2c-79.089%2c378.605%2c0%2c392.575' fill='%230a1f35'%3e%3c/path%3e%3cpath d='M1440 1195.4189999999999C1556.154 1208.713 1644.225 1092.174 1733.476 1016.658 1812.449 949.838 1883.715 876.356 1927.7359999999999 782.741 1972.113 688.369 1994.5259999999998 585.487 1985.063 481.632 1975.2640000000001 374.096 1937.492 271.382 1873.233 184.60199999999998 1805.53 93.17099999999999 1723.469-4.529999999999973 1611.243-23.201000000000022 1500.731-41.58699999999999 1406.673 49.976999999999975 1301.8609999999999 89.54199999999997 1206.575 125.51100000000002 1103.31 135.96800000000002 1023.15 198.798 931.719 270.461 828.154 354.754 816.084 470.294 804.036 585.624 892.12 685.954 962.643 778.002 1021.614 854.971 1113.747 890.254 1186.74 954.081 1276.338 1032.429 1321.75 1181.885 1440 1195.4189999999999' fill='%2312355a'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c392.575C101.07%2c410.428%2c199.744%2c497.731%2c294.449%2c458.172C387.553%2c419.282%2c406.859%2c296.73%2c448.967%2c205.037C491.167%2c113.144%2c564.714%2c20.471%2c540.547%2c-77.719C516.456%2c-175.602%2c403.273%2c-217.053%2c328.454%2c-284.607C263.922%2c-342.873%2c216.408%2c-429.376%2c131.314%2c-447.216C47.405%2c-464.807%2c-25.952%2c-390.28%2c-110.595%2c-376.652C-212.899%2c-360.181%2c-336.277%2c-427.077%2c-414.667%2c-359.311C-491.076%2c-293.258%2c-461.893%2c-168.137%2c-468.396%2c-67.345C-474.397%2c25.656%2c-495.521%2c124.081%2c-451.145%2c206.031C-407.625%2c286.401%2c-318.875%2c329.831%2c-234.414%2c364.755C-160.196%2c395.444%2c-79.089%2c378.605%2c0%2c392.575' fill='%230a1f35'%3e%3c/path%3e%3cpath d='M1440 1195.4189999999999C1556.154 1208.713 1644.225 1092.174 1733.476 1016.658 1812.449 949.838 1883.715 876.356 1927.7359999999999 782.741 1972.113 688.369 1994.5259999999998 585.487 1985.063 481.632 1975.2640000000001 374.096 1937.492 271.382 1873.233 184.60199999999998 1805.53 93.17099999999999 1723.469-4.529999999999973 1611.243-23.201000000000022 1500.731-41.58699999999999 1406.673 49.976999999999975 1301.8609999999999 89.54199999999997 1206.575 125.51100000000002 1103.31 135.96800000000002 1023.15 198.798 931.719 270.461 828.154 354.754 816.084 470.294 804.036 585.624 892.12 685.954 962.643 778.002 1021.614 854.971 1113.747 890.254 1186.74 954.081 1276.338 1032.429 1321.75 1181.885 1440 1195.4189999999999' fill='%2312355a'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}
.game {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
button {
    background: #000000;
    color: #FFF;
    border-radius: 5px;
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18pt;
    font-weight: bold;
}
.disabled {
    color: #757575;
    background-color: #65636368;
}
.stats {
    color: #FFF;
    font-size: 14pt;
    font-weight: bold;
}
.board-container {
    position: relative;
}
.board,
.win {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}
.board {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
}
.board-container.flipped .board {
    transform: rotateY(180deg) rotateZ(50deg);
}
.board-container.flipped .win {
    transform: rotateY(0) rotateZ(0);
}
.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.card-front,
.card-back {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}
.card-back {
    transform: rotateY(180deg) rotateZ(50deg);
    font-size: 28pt;
    user-select: none;
    text-align: center;
    line-height: 100px;
    background: #FDF8E6;
}
.card.flipped .card-front {
    transform: rotateY(180deg) rotateZ(50deg);
}
.card.flipped .card-back {
    transform: rotateY(0) rotateZ(0);
}
.win {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #FDF8E6;
    transform: rotateY(180deg) rotateZ(50deg);
}
.win-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21pt;
    color: #282A3A;
}
.highlight {
    color: #9e8caa;
}


@media (max-width: 767px)  {
    html {
        background-size: cover;
    }
    .game {
        font-size: 14px;
    }

    .controls {
        flex-direction: column;
        gap: 10px;
    }

    button {
        padding: 8px 16px;
        font-size: 14pt;
    }

    .board {
        grid-template-columns: repeat(2, auto);
        grid-gap: 10px;
    }

    .card {
        width: 80px;
        height: 80px;
    }

    .card-front,
    .card-back {
        font-size: 20pt;
    }

    .win-text {
        font-size: 18pt;
        text-align: center;
    }
}
@media (max-width: 300px)  {
    html {
        background-size: cover;
    }
    .game {
        font-size: 14px;
    }

    .controls {
        flex-direction: column;
        gap: 10px;
    }

    button {
        padding: 8px 16px;
        font-size: 14pt;
    }

    .board {
        grid-template-columns: repeat(2, auto);
        grid-gap: 10px;
    }

    .card {
        width: 80px;
        height: 80px;
    }

    .card-front,
    .card-back {
        font-size: 20pt;
    }

    .win-text {
        font-size: 18pt;
        text-align: center;
    }
}