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


.stat,.board-stats
{
    background:#aaa8;
    padding:10px;
    border-radius:.35rem;
    backdrop-filter:blur(10px);
}
.board-stats
{
    padding:1em;
}

#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
{
    font-size:2em;
    text-shadow:0 0 3px #fff, 0 0 15px #007;
    animation: victoryShadow 2s ease-in-out 6 alternate;
}

#game-over p
{
    font-size:1.2em;
    color:#333;
}

div.game button
{
    font-size:15px;
    padding:12px;
    margin:0 9px;
}
div.game span.collapse, div.game span.expand
{
    font-size:15px;
    margin:auto;
    padding:.36em .52em .36em 1.94em;
    background-size:1.1em;
    background-position: .52em 50%;
}


div.game
{
	margin:auto;
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	gap:12.5%;
	container-type:size;
	height:379.259px;
	width:500px;
	box-sizing:border-box;
	align-items:center;
    margin-bottom:2.5em;
}
div.game:fullscreen
{
	background-color:#f0f0f0;
	width:100%;
	height:100%;
}

div.game>div.tablet
{
	height:75%;
	aspect-ratio:1/1;
	position:relative;
	background:linear-gradient(135deg, #a35940, #91472e);
	box-shadow:.5cqh .5cqh 2cqh #000 inset, .5cqh .5cqh .5cqh #b68c82, -.5cqh -.5cqh .5cqh #763e2d;
	border-radius:1.5cqh;
	&:before
	{
		content:'';
		position:absolute;
		inset:-10%;
		z-index:-1;
		border-radius:5%;
		background:linear-gradient(135deg, #a2593f, #90462d);
		box-shadow:1cqh 1cqh 2.5cqh #000, .5cqh .5cqh .5cqh #b68c82 inset, -.5cqh -.5cqh .5cqh #763e2d inset;
	}
}
div.game>div.tablet:focus
{
    outline:none;
    border:none;
}

div.game>div.info
{
	width:150px;
	height:75%;
    display:flex;
    gap:30px;
    flex-direction:column;
    top:-4cqh;
    position:relative;
}

div.tile
{
	position:absolute;
	width:16.875cqh;/*22.5%;*/
	height:16.875cqh;/*22.5%;*/
	cursor:pointer;
	overflow:hidden;
	background-image:url(basic.svg);
	background-repeat:no-repeat;
	background-origin:border-box;
	background-size:400%;
	border-radius:.78cqw;
	box-shadow:.26cqh .26cqh .78cqh black;
	box-sizing:border-box;
	border:.26cqw solid transparent;
	z-index:1;
    transition:left .2s,top .2s;
}

div.tile:hover
{
	border:.2cqw solid white;
}

div#tilea { background-position:0 0; }
div#tileb { background-position:33.33% 0; }
div#tilec { background-position:66.67% 0; }
div#tiled { background-position:100% 0; }
div#tilee { background-position:0 33.33%; }
div#tilef { background-position:33.33% 33.33%; }
div#tileg { background-position:66.67% 33.33%; }
div#tileh { background-position:100% 33.33%; }
div#tilei { background-position:0 66.67%; }
div#tilej { background-position:33.33% 66.67%; }
div#tilek { background-position:66.67% 66.67%; }
div#tilel { background-position:100% 66.67%; }
div#tilem { background-position:0 100%; }
div#tilen { background-position:33.33% 100%; }
div#tileo { background-position:66.67% 100%; }
div#tilep { background-position:100% 100%; }