/* CSS Styles for the game */
.dotank-memory-game__title {
    color: teal;
}

:root {
    --dotank-game-color-primary: #2e294e;
    --dotank-game-color-takeda-red: #E1242A;
    --dotank-game-color-takeda-deep-red: #8A1415;
    --dotank-game-color-takeda-cream: #FBF1D8;
    --dotank-game-color-takeda-text: #34373F;




    --dotank-game-color-secondary: #ffd400;
    --dotank-game-color-tertiary: #a34747;
    --dotank-game-color-light: #eadeda;
    --dotank-game-color-dark: #837a75;

    --dotank-game-font-primary: 'Mars Centra', sans-serif;
    --dotank-game-font-secondary: 'Lato', sans-serif;
    --dotank-game-font-heading: 'Mars Centra', sans-serif;
    --dotank-game-font-timer: 'Share Tech Mono', monospace;

    scroll-behavior: smooth;
}

/* Memory Game Styles */

.game2-section-game-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.game2-winner-wrapper {
    position: absolute;
    display: none;
    line-height: 1.5;
    width: 100%;
    text-align: center;
    background-color: rgba(46, 41, 78, .85);
    transform: scale(0);

    transition: transform 0.6s ease-in;
}

.game2-winner-wrapper.won {
    display: flex;
    flex-direction: column;
    transform: scale(1);
    border-radius: 16px;
}

.game2-winner-wrapper.won>.game-panel-row {
    justify-content: center;
}

.btn-icon-leaderboard {
    display: flex;
}

.btn-icon-leaderboard>a {
    align-self: center;
}

.winner {
    /* font-family: var(--dotank-game-font-heading); */
    font-family: 'Mars Centra', sans-serif;
    font-weight: 900;
    font-size: 5em;
    color: white;
    padding-top: 15px;
}

.ajax-response-text {
    color: #eadeda;
    font-size: 1.5rem;
}


.winner-play-again,
.winner-leaderboard {
    display: flex;
    flex-wrap: wrap;
}

.winner-play-again>span,
.winner-leaderboard>span>a {
    align-self: center;
}



.game2-game-board-wrapper.game-off>.game-card {
    /* filter: blur(6px); */
    cursor: not-allowed;
}

.game2-game-board-wrapper {
    max-width: 920px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    visibility: visible;
    transition: 0.8s ease-in;
    margin-top: 30px;
}


.game2-game-board-wrapper.game-on {
    visibility: visible;
}

.game2-game-card {
    width: 135px;
    height: 135px;
    /* From https://css.glass */
    /* background: linear-gradient(90deg, rgba(6, 143, 153, 1) 0%, rgba(6, 143, 153, 1) 50%, #0000a0 50%, rgba(0, 0, 160, 1) 100%); */
    background: rgb(0, 0, 160);
    background: linear-gradient(-45deg, rgba(0, 0, 160, 1) 0%, rgba(0, 0, 160, 1) 50%, #068F99 50%, #068F99 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: 3px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, .85);

    transition: all 0.3s linear;
}

.game2-game-card:active {
    transform: scale(0.95);
    box-shadow: 0 0 3px rgba(0, 0, 0, .95);
}

/* Game Panel v2 */

.game2-game-panel {
    /* From https://css.glass */
    /* background: #068F99; */
    background: rgb(255, 50, 158);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.9px);
    -webkit-backdrop-filter: blur(6.9px);
    /* padding: 20px 10px 20px 10px; */
    width: 100%;
}

.game-panel-row {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.game-panel-row p {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
}

.game-panel-row p {
    margin-left: 30px;
}

/* .game-panel-row p {
    width: 50%;
} */

.btn-hard,
.game-panel-score,
.winner-leaderboard a,
.leaderboard-link {
    cursor: pointer;
    /*font-family: 'Mars Centra', sans-serif;*/
    font-family: var(--dotank-game-font-heading);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.8rem;
}

.game-panel-timer {
    cursor: pointer;
    /*font-family: 'Mars Centra', sans-serif;*/
    font-family: var(--dotank-game-font-timer);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.8rem;
}

p.btn-icon-play,
p.btn-icon-timer,
p.btn-icon-turns {
    display: flex;
    align-items: center;
}

.btn-icon-play::before {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='material-symbols:play-circle-rounded'%3E%3Cpath id='Vector' d='M23.75 23.3125V36.6875C23.75 37.6458 24.1875 38.375 25.0625 38.875C25.9375 39.375 26.7917 39.3333 27.625 38.75L38 32.125C38.7917 31.625 39.1875 30.9167 39.1875 30C39.1875 29.0833 38.7917 28.375 38 27.875L27.625 21.25C26.7917 20.6667 25.9375 20.625 25.0625 21.125C24.1875 21.625 23.75 22.3542 23.75 23.3125ZM30 55C26.5417 55 23.2917 54.3433 20.25 53.03C17.2083 51.7167 14.5625 49.9358 12.3125 47.6875C10.0625 45.4375 8.28167 42.7917 6.97 39.75C5.65833 36.7083 5.00167 33.4583 5 30C5 26.5417 5.65667 23.2917 6.97 20.25C8.28333 17.2083 10.0642 14.5625 12.3125 12.3125C14.5625 10.0625 17.2083 8.28167 20.25 6.97C23.2917 5.65833 26.5417 5.00167 30 5C33.4583 5 36.7083 5.65667 39.75 6.97C42.7917 8.28333 45.4375 10.0642 47.6875 12.3125C49.9375 14.5625 51.7192 17.2083 53.0325 20.25C54.3458 23.2917 55.0017 26.5417 55 30C55 33.4583 54.3433 36.7083 53.03 39.75C51.7167 42.7917 49.9358 45.4375 47.6875 47.6875C45.4375 49.9375 42.7917 51.7192 39.75 53.0325C36.7083 54.3458 33.4583 55.0017 30 55Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    margin-right: 10px;
}

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

.btn-icon-timer::before {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='material-symbols:clock-loader-40'%3E%3Cpath id='Vector' d='M30 55C26.5417 55 23.2917 54.3433 20.25 53.03C17.2083 51.7167 14.5625 49.9358 12.3125 47.6875C10.0625 45.4375 8.28167 42.7917 6.97 39.75C5.65833 36.7083 5.00167 33.4583 5 30C5 26.5417 5.65667 23.2917 6.97 20.25C8.28333 17.2083 10.0642 14.5625 12.3125 12.3125C14.5625 10.0625 17.2083 8.28167 20.25 6.97C23.2917 5.65833 26.5417 5.00167 30 5C33.4583 5 36.7083 5.65667 39.75 6.97C42.7917 8.28333 45.4375 10.0642 47.6875 12.3125C49.9375 14.5625 51.7192 17.2083 53.0325 20.25C54.3458 23.2917 55.0017 26.5417 55 30C55 33.4583 54.3433 36.7083 53.03 39.75C51.7167 42.7917 49.9358 45.4375 47.6875 47.6875C45.4375 49.9375 42.7917 51.7192 39.75 53.0325C36.7083 54.3458 33.4583 55.0017 30 55ZM30 50C32.6667 50 35.2292 49.5 37.6875 48.5C40.1458 47.5 42.3125 46.0625 44.1875 44.1875L30 30V10C24.4167 10 19.6875 11.9375 15.8125 15.8125C11.9375 19.6875 10 24.4167 10 30C10 35.5833 11.9375 40.3125 15.8125 44.1875C19.6875 48.0625 24.4167 50 30 50Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    margin-right: 20px;
}

.btn-icon-turns::before {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='mdi:rotate-counter-clockwise'%3E%3Cpath id='Vector' d='M32.5 7.5C26.5326 7.5 20.8097 9.87053 16.5901 14.0901C12.3705 18.3097 10 24.0326 10 30H2.5L12.225 39.725L12.4 40.075L22.5 30H15C15 25.3587 16.8437 20.9075 20.1256 17.6256C23.4075 14.3437 27.8587 12.5 32.5 12.5C37.1413 12.5 41.5925 14.3437 44.8744 17.6256C48.1563 20.9075 50 25.3587 50 30C50 34.6413 48.1563 39.0925 44.8744 42.3744C41.5925 45.6563 37.1413 47.5 32.5 47.5C27.675 47.5 23.3 45.525 20.15 42.35L16.6 45.9C18.6787 48.0015 21.1554 49.6676 23.8855 50.8009C26.6155 51.9341 29.5441 52.5117 32.5 52.5C38.4674 52.5 44.1903 50.1295 48.4099 45.9099C52.6295 41.6903 55 35.9674 55 30C55 24.0326 52.6295 18.3097 48.4099 14.0901C44.1903 9.87053 38.4674 7.5 32.5 7.5Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    margin-right: 20px;
}

.btn-icon-leaderboard::before {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' 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='white'/%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='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_921_2400'%3E%3Crect width='60' height='60' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    margin-right: 20px;
}

.icon-scalled::before {
    transform: scale(0.6);
}

.game-panel-play-icon:hover {
    transform: scale(1.2);
}

.btn-hard.btn-disabled {
    cursor: not-allowed;
}

.game-panel-player,
.game-panel-player-name {
    display: none;
}

/* Cards */
.game2-game-card.reveal {
    background-size: contain;
}

.game2-game-card.t1.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-01.png');
}

.game2-game-card.t2.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-02.png');
}

.game2-game-card.t3.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-03.png');
}

.game2-game-card.t4.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-04.png');
}

.game2-game-card.t5.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-05.png');
}

.game2-game-card.t6.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-06.png');
}

.game2-game-card.t7.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-07.png');
}

.game2-game-card.t8.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-08.png');
}

.game2-game-card.t9.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-09.png');
}

.game2-game-card.t10.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-10.png');
}

.game2-game-card.t11.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-11.png');
}

.game2-game-card.t12.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-12.png');
}

.game2-game-card.t13.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-13.png');
}

.game2-game-card.t14.reveal {
    background-color: var(--dotank-game-color-primary);
    background-image: url('assets/images/tile-14.png');
}


/* Highscores List */

.hall_of_fame_wrapper {
    /* From https://css.glass */
    /* background: rgba(47, 110, 200, 0.46); */
    background-color: #0000a0;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.4px);
    -webkit-backdrop-filter: blur(10.4px);
    border: 1px solid rgba(47, 110, 200, 0.31);
    padding: 30px;
}

.scoreboard-table th {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--dotank-game-color-secondary);
}

.scoreboard-table {
    border: none;
    color: var(--dotank-game-color-takeda-cream);
    font-weight: 600;
    font-size: 1rem;
}


/* Media Queries */

@media only screen and (min-width: 370px) and (max-width: 600px) {

    /* ruleset for 370px - 600px */
    .game-panel-play-icon,
    .game-panel-player-icon,
    .game-panel-timer-icon,
    .game-panel-turns-icon {
        font-size: 1.6rem !important;
    }

    .game-panel-timer,
    .game-panel-score {
        font-size: 1.2rem;
    }

    .game-panel-player,
    .game-panel-player-name,
    .btn-hard {
        font-size: 1.2rem;
    }

    .game-panel-row:first-of-type {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .game2-game-card {
        width: 85px;
        height: 85px;
        margin: 2px;
    }

    .game2-game-board-wrapper {
        width: 400px;
    }

    .scoreboard-table th {
        font-size: 1rem;
        font-weight: 600;
    }

    .scoreboard-table th {
        display: none;
    }

    .scoreboard-table tr {
        display: flex;
        flex-direction: column;
    }

    .scoreboard-table td:first-of-type {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    .scoreboard-table td:nth-child(2),
    .scoreboard-table td:nth-child(3) {
        border-bottom: none;
    }
}