.game-all
{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:center;
    width:850px;
    height:600px;
    gap:30px;
    align-items:center;
    margin:0 auto 4em auto;
}

.game-stats,.game-controls
{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:170px;
}
.game-stats
{
    font-size:15px;
}
.game-controls>.picpick
{
    font-size:26px;
    text-align:center;
}
.game-controls input[type=range]
{
    margin-left:10%;
    width:80%;
    accent-color:#007;
}
.game-label
{
    font-size:15px;
    text-align:center;
    font-weight:bold;
}


.stat,.pack-stats
{
    background:#aaa8;
    padding:10px;
    border-radius:.35rem;
    backdrop-filter:blur(10px);
}
.pack-stats
{
    padding:0 1em;
    flex:1 0 26%;
}
.pack-stats h3
{
    text-align:center;
}
.pack-stats .gm-str
{
    color:#888;
}
.stats-container
{
    display:flex;
    gap:20px;
}

.game-over
{
    text-align:center;
    background:#aaa8;
    padding:5px 10px;
    border-radius:15px;
    backdrop-filter:blur(10px);
    width:150px;
}

@keyframes victoryShadow
{
    from {text-shadow: 0 0 3px #fff, 0 0 15px #007;}
    to {text-shadow: 0 0 3px #fff, 0 0 3px #007;}
}
.game-over h3
{
    /*color:#4CAF50;*/
    font-size:2em;
    text-shadow:0 0 3px #fff, 0 0 15px #007;
    animation: victoryShadow 2s ease-in-out 6 alternate;
}

.final-stats
{
    font-size:1.2em;
    margin-bottom:20px 0;
    color:#333;
}

.game-all button
{
    font-size:15px;
    padding:12px;
    margin:0 9px;
}


.game-board-4, .game-board-5, .game-board-6
{
    display:grid;
    width:600px;
    height:600px;
}
.game-board-4
{
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
}
.game-board-5
{
    grid-template-columns:repeat(5, 1fr);
    gap:12px;
}
.game-board-6
{
    grid-template-columns:repeat(6, 1fr);
    gap:10px;
}

.card
{
    box-sizing:border-box;
    width:100%;
    height:100%;
    position:relative;
    cursor:pointer;
    transform-style:preserve-3d;
    transition:transform .6s;
    background-color:#fff;
}
.game-board-4 .card
{
    border:#fff solid 5px;
    border-radius:15px;
    box-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.game-board-5 .card
{
    border:#fff solid 4px;
    border-radius:12px;
    box-shadow:0 1px 5px rgba(0,0,0,0.5);
}
.game-board-6 .card
{
    border:#fff solid 3px;
    border-radius:10px;
    box-shadow:0 1px 4px rgba(0,0,0,0.5);
}

.card.flipped
{
    transform:rotateY(180deg);
}

.card.matched
{
    /*opacity:.6;*/
    cursor:default;
    transform:rotateY(180deg);
}

.card-face
{
    box-sizing:border-box;
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    background-size:cover;
}
.game-board-4 .card-face
{
    border-radius:10px;
    border:#444 solid 1px;
}
.game-board-5 .card-face
{
    border-radius:8px;
    border:#585858 solid 1px;
}
.game-board-6 .card-face
{
    border-radius:7px;
    border:#777 solid 1px;
}

.card-back
{
    background-image:url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cdefs%3E%3CradialGradient id='G0' cx='-48' cy='-48' gradientUnits='userSpaceOnUse' r='440'%3E%3Cstop offset='0%' stop-color='%23ddd' /%3E%3Cstop offset='100%' stop-color='%23fff' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23G0)' height='256' width='256' x='0' y='0' /%3E%3Cpath d='M 91.4322 108.114C 84.0233 120.211 78.2074 142.603 89.9154 160.878C 96.5723 171.269 103.878 180.345 103.268 195.636C 102.568 213.184 92.2809 231.219 65.4052 231.146C 40.6208 231.079 22.5689 209.714 21.3384 177.239C 20.0513 143.271 45.1613 108.117 67.1423 85.4062C 71.7634 96.0566 80.5456 103.578 91.4322 108.114 z M 233.184 148.721C 245.518 170.218 236.041 196.534 208.532 213.837C 179.758 231.936 136.76 227.766 106.101 220.086C 113.014 210.759 115.136 199.392 113.621 187.696C 127.801 188.064 150.102 181.905 160.075 162.628C 165.745 151.668 169.951 140.802 183.498 133.685C 199.045 125.517 219.809 125.41 233.184 148.721 z M 146.63 33.424C 176.691 49.2935 194.579 88.6162 203.257 119.008C 191.723 117.685 180.819 121.53 171.447 128.69C 164.676 116.226 148.191 99.9913 126.51 100.993C 114.183 101.563 102.67 103.353 89.7331 95.1792C 74.8862 85.7987 64.4105 67.8715 77.9114 44.633C 90.3618 23.2027 117.891 18.2522 146.63 33.424 z' fill='%23fff' stroke='%23aaa' stroke-width='4' /%3E%3C/svg%3E");
}

.card-front
{
    transform: rotateY(180deg);
}