:root {
    --dotank-game-font-primary: 'Lato', sans-serif;
    --dotank-game-font-secondary: 'Lato', sans-serif;
    --dotank-game-font-heading: 'Lato', sans-serif;
    --dotank-game-font-timer: 'Share Tech Mono', monospace;
    scroll-behavior: smooth;
}

#memory-game-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.memory-game-panel-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0px 2px 6px 2px rgba(25, 25, 25, 0.15), 0px 1px 2px 0px rgba(25, 25, 25, 0.30);
    margin-bottom: 15px;
}

.btn-memory-game-icon-play,
.btn-memory-game-icon-timer,
.btn-memory-game-icon-turns {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px; /* Adjust this value as needed */
}

.memory-game-panel-timer {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    min-width: 80px; /* Adjust based on the longest possible time */
    text-align: center;
    display: inline-block;
}

.memory-game-panel-score {
    min-width: 80px; /* Adjust based on the longest possible turn count */
    text-align: center;
}

.memory-game-board-wrapper {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: #FFFFFF;
    /* border-radius: 10px;
    box-shadow: 0px 2px 6px 2px rgba(25, 25, 25, 0.15), 0px 1px 2px 0px rgba(25, 25, 25, 0.30); */
    margin-bottom: 20px;
    width: fit-content;
    margin: 0 auto;
}

.memory-game-board-wrapper.game-off {
    display: none;
}

.memory-game-board-wrapper.game-idle .memory-game-card {
    pointer-events: none;
}

.memory-game-card {
    perspective: 1000px;
    cursor: pointer;
}

.memory-game-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.memory-game-card-front,
.memory-game-card-back {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 6px 2px rgba(25, 25, 25, 0.15), 0px 1px 2px 0px rgba(25, 25, 25, 0.30);
}

.memory-game-card-front {
    background: #FAFAFC;
    background: url('https://a2.dotankdo.com/wp-content/uploads/2024/09/A2logo4_memory_game_tile.webp') no-repeat center center;
    background-size: 100% 100%;
}

.memory-game-card-back {
    transform: rotateY(180deg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.memory-game-card.flipped .memory-game-card-inner {
    transform: rotateY(180deg);
}

.memory-winner-wrapper {
    display: none;
    flex-direction: column;
    align-items: center;
    background: #333;
    color: #fff;
    padding: 40px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.memory-winner-wrapper.won {
    display: flex;
}


/* Hall Of Fame */

.hall_of_fame_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.scoreboard-table {
    width: 100%;
    border-collapse: collapse;
}

.scoreboard-header th {
    border-bottom: 2px solid #000;
    padding: 10px;
}

.scoreboard-table td {
    padding: 10px;
    text-align: center;
}

@media only screen and (min-width: 370px) and (max-width: 600px) {
    .memory-game-panel {
        font-size: 1rem;
    }

    .memory-game-panel-timer,
    .memory-game-panel-score,
    .memory-game-btn-hard {
        font-size: 1rem;
    }

    .memory-game-card {
        width: 65px;
        height: 65px;
        margin: 2px;
    }

    #memory-game-wrapper {
        width: 100%;
    }
}


.btn-memory-game-icon-play::before {
    content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%238cad1e'/%3E%3Cpath d='M10.1338 21.9635V10.5699C10.1338 8.99312 11.8733 8.03645 13.2049 8.88087L22.1883 14.5777C23.4268 15.3631 23.4268 17.1703 22.1883 17.9557L13.2049 23.6525C11.8733 24.4969 10.1338 23.5402 10.1338 21.9635Z' fill='%23F3F3F7'/%3E%3C/svg%3E");
margin-right: 10px;
	filter: hue-rotate(280deg);
}

.btn-memory-game-icon-play:hover {
    cursor: pointer;
}

.btn-memory-game-icon-timer::before {
    content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%238cad1e'/%3E%3Cpath d='M27.3137 27.3137C29.5513 25.0761 31.0752 22.2251 31.6926 19.1214C32.3099 16.0177 31.9931 12.8007 30.7821 9.87707C29.5711 6.95345 27.5203 4.45459 24.8891 2.69649C22.2579 0.938384 19.1645 2.38913e-07 16 0L16 16L27.3137 27.3137Z' fill='%23F3F3F7'/%3E%3C/svg%3E%0A");
    margin-right: 10px;
	filter: hue-rotate(280deg);
}

.btn-memory-game-icon-turns::before {
    content: url("data:image/svg+xml,%3Csvg width='37' height='34' viewBox='0 0 37 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 18L4.5 21.5L8 18' stroke='%238cad1e' stroke-width='3'/%3E%3Cpath d='M8.68629 28.3137C11.4643 31.0917 15.1673 32.7505 19.0896 32.9741C23.0119 33.1976 26.8794 31.9703 29.955 29.5259C33.0307 27.0815 35.0995 23.591 35.7672 19.7194C36.4349 15.8479 35.6549 11.866 33.5758 8.5326C31.4967 5.19915 28.2638 2.74716 24.4933 1.64387C20.7227 0.540586 16.678 0.863129 13.1299 2.55004C9.58179 4.23695 6.77837 7.1703 5.25382 10.7911C3.88973 14.0309 3.63481 17.6183 4.50804 21' stroke='%238cad1e' stroke-width='3'/%3E%3C/svg%3E ");
    margin-right: 10px;
	filter: hue-rotate(280deg);
}

.btn-memory-game-icon-leaderboard::before {
    content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon-trophy' clip-path='url(%23clip0_921_2400)'%3E%3Cpath id='Vector' d='M41.25 18.75H45V23.0475C44.9995 23.7968 44.7746 24.5288 44.3541 25.1491C43.9337 25.7694 43.3371 26.2495 42.6413 26.5275L41.25 27.0863V18.75ZM18.75 27.0863L17.3588 26.5275C16.6629 26.2495 16.0663 25.7694 15.6459 25.1491C15.2254 24.5288 15.0005 23.7968 15 23.0475V18.75H18.75V27.0863Z' fill='%238cad1e'/%3E%3Cpath id='Vector_2' d='M30 60C22.0435 60 14.4129 56.8393 8.7868 51.2132C3.16071 45.5871 0 37.9565 0 30C0 22.0435 3.16071 14.4129 8.7868 8.7868C14.4129 3.16071 22.0435 0 30 0C37.9565 0 45.5871 3.16071 51.2132 8.7868C56.8393 14.4129 60 22.0435 60 30C60 37.9565 56.8393 45.5871 51.2132 51.2132C45.5871 56.8393 37.9565 60 30 60ZM11.25 18.75V23.0475C11.2491 24.547 11.6978 26.0124 12.5381 27.2543C13.3783 28.4963 14.5716 29.4579 15.9637 30.015L19.2075 31.3125C19.7908 33.2801 20.9003 35.051 22.4163 36.4342C23.9324 37.8174 25.7973 38.7603 27.81 39.1612C27.075 42.765 24.9675 45 20.6325 45H20.625C20.1277 45 19.6508 45.1975 19.2992 45.5492C18.9475 45.9008 18.75 46.3777 18.75 46.875C18.75 47.3723 18.9475 47.8492 19.2992 48.2008C19.6508 48.5525 20.1277 48.75 20.625 48.75H39.375C39.8723 48.75 40.3492 48.5525 40.7008 48.2008C41.0525 47.8492 41.25 47.3723 41.25 46.875C41.25 46.3777 41.0525 45.9008 40.7008 45.5492C40.3492 45.1975 39.8723 45 39.375 45C35.0325 45 32.925 42.7687 32.19 39.1612C34.2031 38.76 36.0684 37.8165 37.5845 36.4326C39.1005 35.0487 40.2098 33.277 40.7925 31.3087L44.0363 30.0113C45.4279 29.4544 46.6207 28.4934 47.4609 27.2521C48.3011 26.0109 48.7501 24.5464 48.75 23.0475V18.75C48.75 17.7554 48.3549 16.8016 47.6516 16.0984C46.9484 15.3951 45.9946 15 45 15H15C14.0054 15 13.0516 15.3951 12.3483 16.0984C11.6451 16.8016 11.25 17.7554 11.25 18.75Z' fill='%238cad1e'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_921_2400'%3E%3Crect width='60' height='60' fill='%238cad1e'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    margin-right: 10px;
	filter: hue-rotate(280deg);
}