@font-face {
	font-family: "Helvetica Bold";
	src: url("Helvetica-Bold.ttf");
}

@font-face {
	font-family: "Helvetica";
	src: url("Helvetica.ttf");
}

:root {
    --font-header: "Helvetica Bold", sans-serif;
    --font-body: "Helvetica", sans-serif;
    --maxSize: 680px;
    --bla: #000000;
    --whi: #ffffff;
    --red: #DA4A4A;
    --grn: #4AAA52;
    --blu: #4A7ABA;
    --ylw: #D8B028;
    --gra: #eeeeee;
    --dgr: #dddddd;
    --drg: #aaaaaa;
    --ddg: #888888;

    --menubgcolor: linear-gradient(to left, #ff6531, #ff9003);
    --contrastcolor: var(--bla);
    --buttoncolor: var(--blu);
    --titlecolor: var(--bla);
    --menucolor: var(--whi);
    --bgcolor: var(--gra);
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    box-sizing: border-box;
}

html,
body {
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}

html {
    height: 100vh;
    width: 100vw;
}

body {
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
	background: var(--bla);
    height: 100%;
    width: 100%;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--font-header);
	color: var(--titlecolor);
    text-transform: none;
    line-height: 1.25;
    font-weight: bold;
    user-select: none;
    display: block;
    margin: 0;
}

h1,
.h1 {
    font-size: 2.875rem;
}

h2,
.h2 {
    font-size: 2.0625rem;
}

h3,
.h3 {
    font-size: 1.625rem;
}

h4,
.h4 {
    font-size: 1.5rem;
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
    padding: 0 0 .25rem;
}

p {
	color: var(--bla);
    user-select: none;
    font-size: 1em;
    padding: 0;
    margin: 0;
}

group {
	display: flex;
}

/* ==== GAME ==== */
game {
    position: relative;
	overflow: hidden;
    display: block;
    height: 100%;
    width: 100%;
}

game[disabled]>:not(menu) {
	pointer-events: none;
	user-select: none;
	opacity: .375;
}

game>:not(text) {
	transition: opacity .25s ease-in-out
}

game>.title {
    pointer-events: none;
	position: absolute;
	user-select: none;
	top: 1.5rem;
	z-index: 3;
}

game>.title>.span {
	transition: color 0.2s ease-in-out;
}

game:has([turn=white])>.title>span {
	color: var(--ddg) !important;
}

game:has([turn=black])>.title>span {
	color: var(--contrastcolor) !important;
}

board {
	background-color: sienna;
	width: var(--maxSize);
	aspect-ratio: 1 / 1;
	position: relative;
	max-width: 100%;
	padding: 1.25em;
	margin: 0 auto;
}

info {
	transform: translate(-50%, -37.5%);
	transition: 0.25s ease-in-out;
	background-color: var(--whi);
	border: 1px solid var(--bla);
	pointer-events: none;
	text-align: justify;
	border-radius: 1rem;
	font-size: 1.95rem;
	padding: 25px 35px;
	position: absolute;
	user-select: none;
	z-index: 100000;
	opacity: 0;
	width: 75%;
	left: 50%;
	top: 50%;
}

info.active {
	transform: translate(-50%, -50%);
	pointer-events: initial;
	opacity: 1;
}

text {
	display: none;
    transform: translate(-50%, -50%);
	text-shadow: .0625em .0625em var(--bla);
    font-family: var(--font-header);
    -webkit-text-stroke: 3px;
    line-height: .85em;
    text-align: center;
	position: absolute;
    user-select: none;
    font-size: 9rem;
    z-index: 5;
    left: 50%;
    top: 50%;
}

button[type='backtomenu'],
button[value='blackjack'],
button[type='info'] {
	background: var(--buttoncolor);
	will-change: transform;
	border-radius: 10px;
	position: absolute;
	cursor: pointer;
	padding: 14px;
	bottom: 2rem;
	z-index: 10;
	left: 2rem;
	border: 0;
}

button[value='blackjack'],
button[type='info'] {
    right: 2rem;
    left: unset;
}

button[type='backtomenu']:active,
button[value='blackjack']:active,
button[type='info']:active {
	outline: 5px solid var(--ylw);
}

button[type='backtomenu'][disabled] {
	pointer-events: none;
	cursor: initial;
}

button span {
	background-size: contain;
	pointer-events: none;
	display: block;
	height: 52px;
	width: 52px;
	background-color: var(--menucolor);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

button[type='backtomenu'] span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 299.021 299.021' fill='%23fff' xml:space='preserve'%3E%3Cpath d='M292.866 254.432a6.156 6.156 0 0 1-5.5-3.399c-.354-.684-28.541-52.949-146.169-54.727v51.977a6.146 6.146 0 0 1-3.432 5.513 6.157 6.157 0 0 1-6.461-.63L2.417 154.392A6.154 6.154 0 0 1 0 149.516c0-1.919.898-3.72 2.417-4.888l128.893-98.77a6.164 6.164 0 0 1 6.461-.639 6.14 6.14 0 0 1 3.432 5.509v54.776c3.111-.198 7.164-.37 11.947-.37 43.861 0 145.871 13.952 145.871 143.136a6.15 6.15 0 0 1-4.75 5.993 5.552 5.552 0 0 1-1.405.169z'/%3E%3C/svg%3E");
}

button[type='info'] span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath fill='%23fff' d='m17.962 24.725 1.806.096v2.531h-7.534v-2.406l1.045-.094c.568-.063.916-.254.916-1.014v-8.801c0-.699-.188-.92-.791-.92l-1.106-.062v-2.626h5.666l-.002 13.296zM15.747 4.648c1.394 0 2.405 1.047 2.405 2.374 0 1.331-1.014 2.313-2.438 2.313-1.454 0-2.404-.982-2.404-2.313 0-1.327.95-2.374 2.437-2.374zM16 32C7.178 32 0 24.822 0 16S7.178 0 16 0c8.82 0 16 7.178 16 16s-7.18 16-16 16zm0-29C8.832 3 3 8.832 3 16s5.832 13 13 13 13-5.832 13-13S23.168 3 16 3z'/%3E%3C/svg%3E");
}

/* ==== MENU ==== */
menu {
	transform: translate(-50%, -50%);
	font-family: var(--font-header);
    border: 1px solid var(--bla);    
	background: var(--menubgcolor);
	border-radius: 10px;
	align-items: center;
	text-align: center;
	flex-flow: column;
	color: var(--bla);
	overflow: hidden;
	position: fixed;
	line-height: 1;
	font-size: 3em;
	display: flex;
	z-index: 1000;
	width: 50%;
	padding: 0;
	margin: 0;
	left: 50%;
	top: 50%;
}

menu#indexmenu {
	width: 65%;
}

menu>:not(:last-child) {
	border-bottom: 1px solid var(--bla);
}

menu menutitle {
	padding: 1rem 1rem .5rem;
	color: var(--menucolor);
	position: relative;
	user-select: none;
	font-size: 1.25em;    
    width: 100%;
}

menu menuoption {
	font-family: var(--font-body);
	padding: 1rem 1rem .5rem;
	background: var(--whi);
	position: relative;
	width: fit-content;
	user-select: none;
	cursor: pointer;
    width: 100%;
}

menu menuoption:active {
	background: var(--ylw);
}

game>controls {
	background: var(--gra);
	border-radius: .375em;
	padding: .5rem;
	display: flex;
	gap: .5rem;
}

game>controls button {
	background-color: transparent !important;
    color: var(--bla) !important;
	will-change: transform;
	border: 0 !important;
    aspect-ratio: 1 / 1;
	position: relative;
    line-height: .9;
    height: unset;
}

game>controls button>span {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: transparent;
	pointer-events: none;
    padding-top: 0.75rem;
	user-select: none;
    font-size: 2rem;
	height: unset;
	width: unset;
	z-index: 1;
}

game>controls button::after {
	content: "";
    background: linear-gradient(135deg, var(--whi) 0, transparent 100%);
	border-radius: .375em;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

game>controls button:active {
	animation: touchButt .25s ease-in-out forwards;
}

game>controls button[disabled] {
	opacity: .375;
}

@keyframes touchButt {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(.9);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes moveUp {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-12.5%);
	}
	100% {
		transform: translateY(0%);
	}
}

@keyframes moveDown {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(50%);
	}
	100% {
		transform: translateY(0%);
	}
}

/* ==== INDEX ==== */
#index {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
	display: flex;
    padding: 2rem;
    border: 0;
}

/* ==== SIMON ==== */
#simon {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
	display: flex;
    padding: 2rem;
    border: 0;
}

#simon circle,
#simon cross {
    background-color: var(--contrastcolor);
    max-width: var(--maxSize);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    width: 100%;
}

#simon circle::after {
	content: "";
    transform: translate(-50%, -50%);
	background-color: inherit;
	border-radius: 100%;
	position: absolute;
	height: 27.5%;
	width: 27.5%;
	z-index: 5;
	left: 50%;
	top: 50%;
}

#simon>span {
	text-shadow: .0625em .0625em var(--bla);
    transform: translate(-50%, -50%);
    font-family: var(--font-header);
	position: absolute;
    font-weight: bold;
    user-select: none;
    color: var(--red);
    font-size: 2em;
    display: flex;
    z-index: 10;
    gap: .25em;
    left: 50%;
    top: 50%;
}

#simon>span>span {
	font-size: 1em;
}

#simon>span>button {
    transition: transform .2s ease-in-out;
    font-family: var(--font-header);
    will-change: transform;
    color: var(--whi);
	background: none;
    cursor: pointer;
    font-size: 1em;
    line-height: 3;
    border: 0;
}

#simon>span>button:active {
	transform: scale(.95);
}

#simon circle button {
	transition: filter .25s ease-in-out, .375s ease-in-out;
	border: 15px solid var(--contrastcolor);
	background-color: var(--grn);
	border-radius: 5000px 0 0 0;
	will-change: transform;
	position: absolute;
	cursor: pointer;
	height: 45%;
	opacity: 1;
	width: 45%;
	left: 5%;
	top: 5%;
}

#simon circle button:not([disabled]):active {
	z-index: 1;
}

#simon circle button[disabled] {
	cursor: initial;
}

#simon circle button.active {
	filter: brightness(1.375);
	transform: scale(.95);
	z-index: 1;
}

#simon circle button:nth-child(2) {
	background-color: var(--red);
	border-radius: 0 5000px 0 0;
	left: unset;
	right: 5%;
}

#simon circle button:nth-child(3) {
	background-color: var(--blu);
	border-radius: 0 0 5000px 0;
	left: unset;
	top: unset;
	bottom: 5%;
	right: 5%;
}

#simon circle button:nth-child(4) {
	background-color: var(--ylw);
	border-radius: 0 0 0 5000px;
	bottom: 5%;
	top: unset;
}

#simon cross:not([id]) {
	transform: translate(-50%, -50%) rotate(-45deg) scale(1.25);
    background-color: transparent;
	transition: 0s !important;
    position: absolute;
    z-index: 15;
    left: 50%;
    top: 50%;
}

#simon>cross::before,
#simon>cross::after {
	content: "";
	box-shadow: 10px 0 0 0 var(--bla) inset;
	transform: translate(-50%);
	background: var(--red);
	position: absolute;
	display: block;
	height: 100%;
	width: 10%;
	left: 50%;
}

#simon>cross::after {
	transform: translate(-50%) rotate(-90deg);
}

/* ==== SUDOKU ==== */
#sudoku {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
    flex-wrap: wrap;
	display: flex;
    padding: 2rem;
    border: 0;
    gap: 7%;
}

#sudoku board {
	background: transparent;
	padding: 0;
}

#sudoku board {
	flex-wrap: wrap;
	display: flex;
}

#sudoku board input, 
#sudoku controls button {
	-moz-appearance: textfield;
	transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, color .2s ease-in-out;
	font-family: var(--font-header);
	background-color: var(--whi);
	border: 1px solid var(--bla);
	padding: .5em .25em .25em;
	border-bottom-width: 0;
	height: calc(100% / 9);
	border-right-width: 0;
	width: calc(100% / 9);
	text-align: center;
	color: #0000A09F;
	font-size: 2rem;
	display: block;
}

#sudoku board input:not([disabled]):focus,
#sudoku board input:not([disabled]):active {
	box-shadow: 0 0 0 1px var(--bla) inset;
	z-index: 100;
	outline: 0;
}

#sudoku board input[disabled] {
	pointer-events: none;
	color: var(--bla);
	cursor: initial;
}

#sudoku board input:nth-child(3n),
#sudoku board input:nth-child(9n) {
	border-right-width: 1px;
}

#sudoku board input:nth-child(n+19):nth-child(-n+27),
#sudoku board input:nth-child(n+46):nth-child(-n+54),
#sudoku board input:nth-child(n+73):nth-child(-n+81) {
	border-bottom-width: 1px;
}

#sudoku board input:focus {
	background-color: darkseagreen;
}

#sudoku board input::-webkit-outer-spin-button,
#sudoku board input::-webkit-inner-spin-button {
	appearance: none;
}

#sudoku board+text {
	color: var(--ddg);
}

#sudoku controls {
	max-width: var(--maxSize);
	aspect-ratio: 9 / 1;
	margin: 0 auto;
	flex: 1;
}

/* ==== CHECKERS ==== */
#checkers {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
	display: flex;
    padding: 2rem;
    border: 0;
}

board>squares {
	background-color: wheat;
	position: relative;
	flex-wrap: wrap;
	display: flex;
	height: 100%;
}

board>squares>* {
	transition: background-color .25s ease-in-out;
	background-color: sandybrown;
	position: absolute;
	display: block;
	height: 12.5%;
	width: 12.5%;
}

#chess board>squares>:nth-child(n) {
	background-color: sandybrown;
}

#chess board>squares>:nth-child(16n+1),
#chess board>squares>:nth-child(16n+3),
#chess board>squares>:nth-child(16n+5),
#chess board>squares>:nth-child(16n+7),
#chess board>squares>:nth-child(16n+10),
#chess board>squares>:nth-child(16n+12),
#chess board>squares>:nth-child(16n+14),
#chess board>squares>:nth-child(16n+16) { 
	background-color: wheat;
}

board:not([cpu])>squares>[valid],
board[cpu]:not([turn="black"])>squares>[valid] {
	background-color: darkseagreen !important;
	cursor: pointer;
	z-index: 1;
}

board>pieces {
    height: calc(100% - 2.5em);
    width: calc(100% - 2.5em);
	position: absolute;
    margin: 1.25em;
    left: 0;
    top: 0;
}

board>pieces>* {
	transition: transform .25s ease-in-out, filter .25s ease-in-out;
	will-change: transform;
    background: indianred;
	pointer-events: none;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
	position: absolute;
    display: block;
	width: 12.5%;
	z-index: 1;
}

#checkers>board>pieces>* {
	border: .25rem solid var(--bla);
}

board>pieces>black {
	background: dimgray;
}

board>pieces>*::before,
board>pieces>*::after {
	content: "";
	pointer-events: none;
	position: absolute;
	height: 60%;
	width: 60%;
	left: 20%;
	top: 20%;
}

board>pieces>*::before {
	background-color: rgba(0,0,0,0.3125);
	border-radius: 100%;
	height: 75%;
	left: 12.5%;
	width: 75%;
	top: 12.5%;
}

game:not([disabled]) board[turn="black"]:not([cpu])>pieces>black:not([disabled]),
game:not([disabled]) board[turn="white"]>pieces>white:not([disabled]),
game:not([disabled]) board[turn="red"]>pieces>red:not([disabled]) {
	pointer-events: initial;
	cursor: pointer;
}

board>pieces>.active {
	transform: scale(1.25);
	z-index: 2;
}

board>pieces>[disabled],
board[turn="black"]>pieces>:not(black),
board[turn="white"]>pieces>black,
board[turn="red"]>pieces>black {
	transition: transform .25s ease-in-out, filter .25s .25s ease-in-out;
	filter: contrast(0.3125);
}

#checkers board>pieces>*::after {
	background: url("data:image/svg+xml,%3Csvg fill='goldenrod' height='50%25' width='50%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 267.5 267.5' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M256.975,100.34c0.041,0.736-0.013,1.485-0.198,2.229l-16.5,66c-0.832,3.325-3.812,5.663-7.238,5.681l-99,0.5 c-0.013,0-0.025,0-0.038,0H35c-3.444,0-6.445-2.346-7.277-5.688l-16.5-66.25c-0.19-0.764-0.245-1.534-0.197-2.289 C4.643,98.512,0,92.539,0,85.5c0-8.685,7.065-15.75,15.75-15.75S31.5,76.815,31.5,85.5c0,4.891-2.241,9.267-5.75,12.158 l20.658,20.814c5.221,5.261,12.466,8.277,19.878,8.277c8.764,0,17.12-4.162,22.382-11.135l33.95-44.984 C119.766,67.78,118,63.842,118,59.5c0-8.685,7.065-15.75,15.75-15.75s15.75,7.065,15.75,15.75c0,4.212-1.672,8.035-4.375,10.864 c0.009,0.012,0.02,0.022,0.029,0.035l33.704,45.108c5.26,7.04,13.646,11.243,22.435,11.243c7.48,0,14.514-2.913,19.803-8.203 l20.788-20.788C238.301,94.869,236,90.451,236,85.5c0-8.685,7.065-15.75,15.75-15.75s15.75,7.065,15.75,15.75 C267.5,92.351,263.095,98.178,256.975,100.34z M238.667,198.25c0-4.142-3.358-7.5-7.5-7.5h-194c-4.142,0-7.5,3.358-7.5,7.5v18 c0,4.142,3.358,7.5,7.5,7.5h194c4.142,0,7.5-3.358,7.5-7.5V198.25z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	transition: opacity .25s ease-in-out;
	opacity: 0;
}

#checkers board>pieces>[king]::after {
	opacity: 1;
}

/* ==== CHESS ==== */
#chess {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
	display: flex;
    padding: 2rem;
    border: 0;
}

#chess board>squares>[check] {
	background: indianred;
}

#chess board>pieces>* {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0;
}


#chess board>pieces>black {
	filter: brightness(0.25);
}

#chess board>pieces>black[disabled], 
#chess board[turn="white"]>pieces>black {
	filter: brightness(0.25) contrast(0.3125);
}

#chess board>pieces>::before,
#chess board>pieces>::after {
	content: none;
}

#chess board>pieces>[piece=bishop] { background-image: url("../img/chess/bishop.png"); }
#chess board>pieces>[piece=king] { background-image: url("../img/chess/king.png"); }
#chess board>pieces>[piece=knight] { background-image: url("../img/chess/knight.png"); }
#chess board>pieces>[piece=pawn] { background-image: url("../img/chess/pawn.png"); }
#chess board>pieces>[piece=queen] { background-image: url("../img/chess/queen.png"); }
#chess board>pieces>[piece=rook] { background-image: url("../img/chess/rook.png"); }

/* ==== BLACKJACK ==== */
@keyframes blinkbg {
	0% { background: white; }
	25% { background: indianred; }
	50% { background: white; }
	75% { background: indianred; }
	100% { background: white; }
}

@keyframes blink {
	0% { color: white; }
	25% { color: indianred; }
	50% { color: white; }
	75% { color: indianred; }
	100% { color: white; }
}

@keyframes losetext {
	from { transform: rotate(0deg); }
	to { transform: rotate(15deg); }
}

@keyframes wintext {
	0% { transform: translateY(0) scaleX(1) scaleY(1); }
	35% { transform: translateY(-4rem) scaleX(.85) scaleY(1.15); }
	40% { transform: translateY(-4rem) scaleX(.85) scaleY(1.15); }
	85% { transform: translateY(0) scaleX(1.1) scaleY(.9); }
	100% { transform: translateY(0) scaleX(1) scaleY(1); }
}

#blackjack {
	transition: opacity .5s ease-in-out;
	justify-content: space-between;
	background: var(--grn);
    padding-bottom: 3rem;
    flex-flow: column;
	display: flex;
    padding: 2rem;
}

#blackjack {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 250 100' version='1.1' viewBox='0 0 250 100' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st0%7Bfilter:url(%23b);%7D .st1%7Bfill:%23FFFFFF;%7D .st2%7Bmask:url(%23a);fill:%23ffffff;%7D .st3%7Bfill:%23ffffff%7D .st4%7Bfill:%23ffffff%7D .st5%7Bfill:%23ffffff%7D%0A%3C/style%3E%3Cdefs%3E%3Cfilter id='b' x='203.4' y='2.4' width='38.3' height='38.3' filterUnits='userSpaceOnUse'%3E%3CfeColorMatrix color-interpolation-filters='sRGB' result='source' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/%3E%3CfeFlood flood-color='white' result='back'/%3E%3CfeBlend in='source' in2='back'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='a' x='203.4' y='2.4' width='38.3' height='38.3' maskUnits='userSpaceOnUse'%3E%3Cg class='st0'%3E%3Cpath class='st1' d='m228.6 15c-1-6.1-3.3-10.4-6.1-10.4s-5.1 4.3-6.1 10.4h12.2zm-12.6 6.6c0 1.5 0.1 3 0.2 4.4h12.7c0.1-1.4 0.2-2.9 0.2-4.4s-0.1-3-0.2-4.4h-12.7c-0.2 1.4-0.2 2.9-0.2 4.4zm22.2-6.6c-2-4.7-5.9-8.3-10.8-9.7 1.7 2.3 2.8 5.8 3.4 9.7h7.4zm-20.5-9.7c-4.9 1.5-8.9 5.1-10.8 9.7h7.4c0.6-3.9 1.7-7.4 3.4-9.7zm21.3 11.9h-7.9c0.1 1.4 0.2 2.9 0.2 4.4s-0.1 2.9-0.2 4.4h7.9c0.4-1.4 0.6-2.9 0.6-4.4s-0.3-3-0.6-4.4zm-25.2 4.4c0-1.5 0.1-2.9 0.2-4.4h-7.9c-0.4 1.4-0.6 2.9-0.6 4.4s0.2 3 0.6 4.4h7.9c-0.2-1.5-0.2-2.9-0.2-4.4zm2.7 6.6c1 6.1 3.3 10.4 6.1 10.4s5.1-4.3 6.1-10.4h-12.2zm10.9 9.7c4.9-1.5 8.9-5.1 10.8-9.7h-7.4c-0.6 3.9-1.7 7.4-3.4 9.7zm-20.5-9.7c2 4.7 5.9 8.3 10.8 9.7-1.7-2.3-2.8-5.8-3.4-9.7h-7.4z'/%3E%3C/g%3E%3C/mask%3E%3Ccircle class='st2' cx='222.5' cy='21.6' r='19.2'/%3E%3Cpath class='st3' d='m63.1 76.6c0 4.4-1.1 8.2-3.2 11.3s-5.3 5.5-9.5 7.1-9.3 2.4-15.3 2.4c-5.7 0-10.7-0.9-14.8-2.6s-7.1-4-9.1-6.6-2.9-5.3-2.9-7.9c0-1.8 0.6-3.3 1.9-4.5 1.2-1.2 2.8-1.9 4.7-1.9 1.7 0 3 0.4 3.9 1.2s1.8 2 2.6 3.5c1.6 2.9 3.6 5 5.9 6.4s5.4 2.1 9.3 2.1c3.2 0 5.8-0.7 7.9-2.1s3.1-3.1 3.1-4.9c0-2.8-1.1-4.9-3.2-6.2s-5.6-2.5-10.5-3.7c-5.5-1.4-10-2.8-13.4-4.3-3.5-1.5-6.2-3.5-8.3-5.9-2.2-2.4-3.2-5.4-3.2-9 0-3.2 1-6.2 2.9-9.1s4.7-5.1 8.5-6.8c3.7-1.7 8.2-2.5 13.5-2.5 4.1 0 7.9 0.4 11.2 1.3s6.1 2 8.3 3.5c2.2 1.4 3.9 3 5 4.8 1.2 1.8 1.7 3.5 1.7 5.2 0 1.8-0.6 3.3-1.8 4.5s-3 1.8-5.2 1.8c-1.6 0-3-0.5-4.2-1.4s-2.5-2.3-4-4.2c-1.2-1.6-2.6-2.8-4.3-3.8s-3.9-1.4-6.7-1.4c-2.9 0-5.3 0.6-7.2 1.8s-2.9 2.8-2.9 4.6c0 1.7 0.7 3.1 2.1 4.1 1.4 1.1 3.3 2 5.7 2.7s5.7 1.6 9.8 2.6c5 1.2 9 2.7 12.2 4.3 3.1 1.7 5.5 3.7 7.1 5.9s2.4 4.8 2.4 7.7z'/%3E%3Cpath class='st4' d='m84.8 25.1c-2.2 0-4.1-0.7-5.7-2.1s-2.4-3.3-2.4-5.8c0-2.3 0.8-4.1 2.4-5.6s3.5-2.2 5.7-2.2c2.1 0 3.9 0.7 5.5 2s2.4 3.3 2.4 5.8-0.8 4.4-2.3 5.8c-1.6 1.4-3.5 2.1-5.6 2.1zm7.9 16.5v46.2c0 3.2-0.8 5.6-2.3 7.3s-3.5 2.5-5.8 2.5-4.2-0.8-5.7-2.5-2.2-4.1-2.2-7.2v-45.8c0-3.2 0.7-5.5 2.2-7.1s3.4-2.4 5.7-2.4 4.3 0.8 5.8 2.4c1.5 1.5 2.3 3.7 2.3 6.6z'/%3E%3Cpath class='st5' d='m162.4 66.2v21.3c0 3.4-0.8 5.9-2.3 7.6s-3.5 2.5-6 2.5c-2.4 0-4.4-0.8-5.9-2.5s-2.3-4.2-2.3-7.6v-25.5c0-4-0.1-7.1-0.4-9.4-0.3-2.2-1-4.1-2.2-5.5s-3.1-2.1-5.7-2.1c-5.2 0-8.7 1.8-10.3 5.4-1.7 3.6-2.5 8.8-2.5 15.5v21.6c0 3.3-0.8 5.8-2.3 7.5s-3.5 2.5-5.9 2.5-4.4-0.8-5.9-2.5-2.3-4.2-2.3-7.5v-45.8c0-3 0.7-5.3 2.1-6.9s3.2-2.3 5.5-2.3c2.2 0 4 0.7 5.5 2.2s2.2 3.5 2.2 6.1v1.5c2.8-3.3 5.7-5.8 8.9-7.3 3.2-1.6 6.7-2.3 10.5-2.3 4 0 7.5 0.8 10.4 2.4s5.3 4 7.1 7.3c2.7-3.3 5.6-5.7 8.7-7.3s6.5-2.4 10.3-2.4c4.4 0 8.1 0.9 11.3 2.6s5.5 4.2 7.1 7.4c1.4 2.9 2.1 7.4 2.1 13.7v31.2c0 3.4-0.8 5.9-2.3 7.6s-3.5 2.5-6 2.5c-2.4 0-4.4-0.8-5.9-2.5s-2.3-4.2-2.3-7.5v-27.1c0-3.4-0.1-6.2-0.4-8.3s-1.1-3.8-2.4-5.2-3.2-2.1-5.9-2.1c-2.1 0-4.1 0.6-6 1.9s-3.4 2.9-4.4 5c-1.5 2.7-2.1 7.5-2.1 14.3z'/%3E%3C/svg%3E%0A");%7D .st1%7Bfill:%23FFFFFF;%7D .st2%7Bmask:%23a;fill:%23ffffff;%7D .st3%7Bfill:%23ffffff%7D .st4%7Bfill:%23ffffff%7D .st5%7Bfill:%23ffffff%7D%0A%3C/style%3E%3Cdefs%3E%3Cfilter id='b' x='203.4' y='2.4' width='38.3' height='38.3' filterUnits='userSpaceOnUse'%3E%3CfeColorMatrix color-interpolation-filters='sRGB' result='source' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/%3E%3CfeFlood flood-color='white' result='back'/%3E%3CfeBlend in='source' in2='back'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='a' x='203.4' y='2.4' width='38.3' height='38.3' maskUnits='userSpaceOnUse'%3E%3Cg class='st0'%3E%3Cpath class='st1' d='m228.6 15c-1-6.1-3.3-10.4-6.1-10.4s-5.1 4.3-6.1 10.4h12.2zm-12.6 6.6c0 1.5 0.1 3 0.2 4.4h12.7c0.1-1.4 0.2-2.9 0.2-4.4s-0.1-3-0.2-4.4h-12.7c-0.2 1.4-0.2 2.9-0.2 4.4zm22.2-6.6c-2-4.7-5.9-8.3-10.8-9.7 1.7 2.3 2.8 5.8 3.4 9.7h7.4zm-20.5-9.7c-4.9 1.5-8.9 5.1-10.8 9.7h7.4c0.6-3.9 1.7-7.4 3.4-9.7zm21.3 11.9h-7.9c0.1 1.4 0.2 2.9 0.2 4.4s-0.1 2.9-0.2 4.4h7.9c0.4-1.4 0.6-2.9 0.6-4.4s-0.3-3-0.6-4.4zm-25.2 4.4c0-1.5 0.1-2.9 0.2-4.4h-7.9c-0.4 1.4-0.6 2.9-0.6 4.4s0.2 3 0.6 4.4h7.9c-0.2-1.5-0.2-2.9-0.2-4.4zm2.7 6.6c1 6.1 3.3 10.4 6.1 10.4s5.1-4.3 6.1-10.4h-12.2zm10.9 9.7c4.9-1.5 8.9-5.1 10.8-9.7h-7.4c-0.6 3.9-1.7 7.4-3.4 9.7zm-20.5-9.7c2 4.7 5.9 8.3 10.8 9.7-1.7-2.3-2.8-5.8-3.4-9.7h-7.4z'/%3E%3C/g%3E%3C/mask%3E%3Ccircle class='st2' cx='222.5' cy='21.6' r='19.2'/%3E%3Cpath class='st3' d='m63.1 76.6c0 4.4-1.1 8.2-3.2 11.3s-5.3 5.5-9.5 7.1-9.3 2.4-15.3 2.4c-5.7 0-10.7-0.9-14.8-2.6s-7.1-4-9.1-6.6-2.9-5.3-2.9-7.9c0-1.8 0.6-3.3 1.9-4.5 1.2-1.2 2.8-1.9 4.7-1.9 1.7 0 3 0.4 3.9 1.2s1.8 2 2.6 3.5c1.6 2.9 3.6 5 5.9 6.4s5.4 2.1 9.3 2.1c3.2 0 5.8-0.7 7.9-2.1s3.1-3.1 3.1-4.9c0-2.8-1.1-4.9-3.2-6.2s-5.6-2.5-10.5-3.7c-5.5-1.4-10-2.8-13.4-4.3-3.5-1.5-6.2-3.5-8.3-5.9-2.2-2.4-3.2-5.4-3.2-9 0-3.2 1-6.2 2.9-9.1s4.7-5.1 8.5-6.8c3.7-1.7 8.2-2.5 13.5-2.5 4.1 0 7.9 0.4 11.2 1.3s6.1 2 8.3 3.5c2.2 1.4 3.9 3 5 4.8 1.2 1.8 1.7 3.5 1.7 5.2 0 1.8-0.6 3.3-1.8 4.5s-3 1.8-5.2 1.8c-1.6 0-3-0.5-4.2-1.4s-2.5-2.3-4-4.2c-1.2-1.6-2.6-2.8-4.3-3.8s-3.9-1.4-6.7-1.4c-2.9 0-5.3 0.6-7.2 1.8s-2.9 2.8-2.9 4.6c0 1.7 0.7 3.1 2.1 4.1 1.4 1.1 3.3 2 5.7 2.7s5.7 1.6 9.8 2.6c5 1.2 9 2.7 12.2 4.3 3.1 1.7 5.5 3.7 7.1 5.9s2.4 4.8 2.4 7.7z'/%3E%3Cpath class='st4' d='m84.8 25.1c-2.2 0-4.1-0.7-5.7-2.1s-2.4-3.3-2.4-5.8c0-2.3 0.8-4.1 2.4-5.6s3.5-2.2 5.7-2.2c2.1 0 3.9 0.7 5.5 2s2.4 3.3 2.4 5.8-0.8 4.4-2.3 5.8c-1.6 1.4-3.5 2.1-5.6 2.1zm7.9 16.5v46.2c0 3.2-0.8 5.6-2.3 7.3s-3.5 2.5-5.8 2.5-4.2-0.8-5.7-2.5-2.2-4.1-2.2-7.2v-45.8c0-3.2 0.7-5.5 2.2-7.1s3.4-2.4 5.7-2.4 4.3 0.8 5.8 2.4c1.5 1.5 2.3 3.7 2.3 6.6z'/%3E%3Cpath class='st5' d='m162.4 66.2v21.3c0 3.4-0.8 5.9-2.3 7.6s-3.5 2.5-6 2.5c-2.4 0-4.4-0.8-5.9-2.5s-2.3-4.2-2.3-7.6v-25.5c0-4-0.1-7.1-0.4-9.4-0.3-2.2-1-4.1-2.2-5.5s-3.1-2.1-5.7-2.1c-5.2 0-8.7 1.8-10.3 5.4-1.7 3.6-2.5 8.8-2.5 15.5v21.6c0 3.3-0.8 5.8-2.3 7.5s-3.5 2.5-5.9 2.5-4.4-0.8-5.9-2.5-2.3-4.2-2.3-7.5v-45.8c0-3 0.7-5.3 2.1-6.9s3.2-2.3 5.5-2.3c2.2 0 4 0.7 5.5 2.2s2.2 3.5 2.2 6.1v1.5c2.8-3.3 5.7-5.8 8.9-7.3 3.2-1.6 6.7-2.3 10.5-2.3 4 0 7.5 0.8 10.4 2.4s5.3 4 7.1 7.3c2.7-3.3 5.6-5.7 8.7-7.3s6.5-2.4 10.3-2.4c4.4 0 8.1 0.9 11.3 2.6s5.5 4.2 7.1 7.4c1.4 2.9 2.1 7.4 2.1 13.7v31.2c0 3.4-0.8 5.9-2.3 7.6s-3.5 2.5-6 2.5c-2.4 0-4.4-0.8-5.9-2.5s-2.3-4.2-2.3-7.5v-27.1c0-3.4-0.1-6.2-0.4-8.3s-1.1-3.8-2.4-5.2-3.2-2.1-5.9-2.1c-2.1 0-4.1 0.6-6 1.9s-3.4 2.9-4.4 5c-1.5 2.7-2.1 7.5-2.1 14.3z'/%3E%3C/svg%3E%0A);
	background-blend-mode: soft-light;
	background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 50%;
}

#blackjack[gameover],
#blackjack[winner],
#blackjack[loser],
#blackjack[push] {
	pointer-events: none;
	user-select: none;
	opacity: .7;
}

#blackjack + text {
	transition: opacity .5s ease-in-out;
	min-width: max-content;
	pointer-events: none;
	user-select: none;
	color: var(--whi);
	display: block;
	opacity: 0;
}

#blackjack + text span {
	transform-origin: bottom center;
	will-change: transform;
	display: inline-block;
}

#blackjack[gameover] + text,
#blackjack[winner] + text,
#blackjack[loser] + text,
#blackjack[push] + text {
	opacity: 1;
}

#blackjack + text span {
	animation: losetext .5s 2s forwards ease-in-out;
}

#blackjack[winner] + text span {
	animation: wintext .75s .25s forwards ease-in-out;
}

#blackjack[gameover] + text span,
#blackjack[push] + text span {
	animation: none;
}

#blackjack>controls {
	transform: translate(-50%, -37.5%);
	transition: .25s ease-in-out;
	pointer-events: none;
	flex-wrap: wrap;
	position: fixed;
	width: 302px;
	opacity: 0;
	left: 50%;
	top: 50%;
}

#blackjack>controls.active {
	transform: translate(-50%, -50%);
	pointer-events: initial;
	opacity: 1;
}

#blackjack>controls>button {
	aspect-ratio: 1 / 1;
	font-size: 2.5rem;
	height: 90px;
}

#blackjack>controls>button[value=back] span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='currentColor' class='bi bi-backspace' viewBox='0 0 16 16'%3E%3Cpath d='M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z'/%3E%3Cpath d='M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 0 1 6.603 1h7.08zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-7.08z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    padding: 0 14px;
}

#blackjack button:not([type=info]):not([type=backtomenu]),
#blackjack input {
	transition: opacity .2s ease-in-out, 
				transform .2s ease-in-out, 
				background-color .2s ease-in-out;
	font-family: var(--font-header);
	border-radius: .325em;
	padding: 10px 35px 0;
	line-height: 59px;
	font-size: 1.75em;
	border: 0;
}

#blackjack input {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	background: var(--whi);
	max-width: 8em;
}

#blackjack input:focus,
#blackjack input:active {
	outline: 0;
}

#blackjack input[disabled] {
	background: var(--ddg);
}

#blackjack input.invalid {
	animation: blinkbg .75s forwards ease-in;
}

#blackjack input+button:not([type=info]):not([type=backtomenu]) {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

#blackjack button:not([type=info]):not([type=backtomenu]) {
	background-color: #ffffff4F;
	user-select: none;
	color: var(--whi);
	cursor: pointer;
}

#blackjack button:active {
	opacity: .7;
}

#blackjack button:not([type=info]):not([type=backtomenu])[disabled] {
	background-color: #0000002F;
	opacity: 1 !important;
	cursor: not-allowed;
	color: var(--ddg);
}

deco {
	transform: translate(-50%, -50%);
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
}

deco p {
	color: var(--whi) !important;
}

deck {
	padding-bottom: 5px;
	position: relative;
	margin-left: auto;
}

deck::after {
	content: "";
	background: linear-gradient(to bottom, #fff 22px, #ccc 23px, #fff 23px, #ccc 25px, #fff 25px, #ccc 27px, #fff 27px, #ccc 29px, #fff 29px, #ccc 31px, #fff 31px, #ccc 33px, #fff 33px, #ccc 35px, #fff 35px, #ccc 37px, #fff 37px, #ccc 39px, #fff 39px);
    box-shadow: 0 0 0 .125em #bbb inset;
    border-radius: .325em;
    position: absolute;
    height: 40px;
    width: 100%;
    bottom: 0px;
	left: 0;
}

deck .card {
	position: relative;
	z-index: 3;
}

dealer, 
player {
	flex-flow: column;
	flex-wrap: wrap;
	display: flex;
	gap: 1em;
}

dealer score,
player score {
	font-family: var(--font-header);
	align-items: center;
	user-select: none;
	color: var(--whi);
	line-height: 1;
	font-size: 2em;
	display: flex;
	gap: .25em;
}

dealer score span,
player score span {
	text-align: center;
	width: 2.25rem;
}

dealer hand,
player hand,
player controls {
	flex-wrap: wrap-reverse;
	align-items: center;
	display: flex;
}

player hand {
	flex-flow: row-reverse;
}

player controls {
	justify-content: space-between;
	gap: 1em;
}

player controls>group {
	align-items: center;
    flex-wrap: wrap;
	gap: 1em;
}

player controls>group:last-child {
	margin-left: auto;
}

player controls>group>group {
	gap: 0;
}

player controls button[type='backtomenu'],
player controls button[type='fullscreen'] {
	position: static;
}

player score img {
	max-height: 44px;
	max-width: 100%;
}

player chips {
	transition: .2s ease-in-out;
	text-align: center;
	min-width: 4.5rem;
}

player chips.invalid {
	animation: blink .75s forwards ease-in;
}

.card {
	transition: transform .25s ease-in-out;
	max-width: calc(20vw - 1.6rem);
	will-change: transform;
	user-select: none;
	max-height: 150px;
}

.card[disabled] {
	pointer-events: none;
}

#blackjack .card[disabled],
.card[disabled][filler] {
	transition: 0s ease-in-out;
	visibility: hidden;
}

game>.card {
	position: fixed;
	z-index: 5;
}

.card.turning {
	animation: turncard .25s ease-in-out forwards;
	transition: 0s ease-in-out;
}

.card.turned {
	transition: 0s ease-in-out;
	transform: scaleX(0);
}

.card.turned.turning {
	animation: turncardback .25s ease-in-out forwards;
	transition: 0s ease-in-out;
}

.card.active {
	transform: scale(1.25);
}

.card.active[style*=left] {
	z-index: 10 !important;
}

player .card:hover {
	transform: translateY(-4em);
	z-index: 10;
}

dealer .card:not(:first-child),
player .card:not(:last-child) {
	margin-left: 1em;
}

@keyframes turncard {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

@keyframes turncardback {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* ==== LIGHTS OUT ==== */
#lightsout {
    background: var(--bgcolor);
	align-items: center;
    color: var(--whi);
	display: flex;
    padding: 2rem;
    border: 0;
}

#lightsout board {
    background: var(--contrastcolor);
    flex-flow: column;
    flex-wrap: wrap;
    display: flex;
    padding: 1em;
    gap: 1em;
}

#lightsout board squaregroup {
    display: flex;
    gap: 1em;
    flex: 1;
}

#lightsout board square {
	background: linear-gradient(135deg, #fff6 50%, #0006 50%, #0006 100%);
	transition: background .2s ease-in-out;
	background-color: var(--blu);
	position: relative;
	cursor: pointer;
	flex: 1;
}

#lightsout board square::before,
#lightsout board square::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

#lightsout board square::after {
	background-color: inherit;
	height: 80%;
	width: 80%;
	left: 10%;
	top: 10%;
}

#lightsout board square:active {
	animation: touchButt .25s ease-in-out forwards;
}

#lightsout board square.green {
	background-color: var(--grn);
}

#lightsout board square.red {
	background-color: var(--red);
}

#lightsout board square.yellow {
	background-color: var(--ylw);
}

#lightsout board square[disabled] {
	pointer-events: none;
	cursor: initial;
}

/* ==== SOLITAIRE ==== */
#solitaire {
	align-items: flex-start;
	background: var(--grn);
    flex-flow: column;
    display: flex;
    padding: 2rem;
    border: 0;
}

#solitaire .title {
    color: var(--whi);
    position: static;
    line-height: .9;
}

#solitaire .card[valid] {
	transform: scale(1.025);
}

#solitaire text {
    color: var(--whi);
}

#solitaire .card {
	max-height: 16.25vh;
	position: relative;
}

#solitaire .card:not([style*=top]):not([class*=turn]):not([disabled]) {
	cursor: pointer;
}

#solitaire #waste {
	z-index: 10;
}

#solitaire #tableau .card[src*=Back] {
	cursor: initial !important;
}

#solitaire #tableau .card~.card {
	margin-top: -85.70%;
}

#solitaire #tableau .card+.card~.card {
	margin-top: -95%;
}

#solitaire board {
    max-height: calc(100vh - 4rem);
	background-color: transparent;
    flex-flow: column-reverse;
    justify-content: flex-end;
	aspect-ratio: unset;
    max-width: 900px;
    display: flex;
	width: unset;
    padding: 0;
    gap: 1rem;
}

#solitaire row,
#solitaire column {
	height: fit-content;
    margin: 0 auto;
	display: flex;
}

#solitaire row {
	gap: 1rem;
}

#solitaire column {
	align-items: flex-start;
	flex-direction: column;
	flex: 1;
}

#solitaire column:has([filler]) {
	z-index: -1;
}

#solitaire #foundation column {
	position: relative;
}

#solitaire #foundation column .card:not([placeholder]) {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}

#tableau .card[placeholder] {
	margin-bottom: -50%;
}

/* ==== RESPONSIVE ==== */
@media (orientation: landscape) {
	#simon circle,
	#simon cross,
	#checkers board,
	#sudoku board,
	#sudoku controls,
	#lightsout board,
	#chess board {
	    max-height: var(--maxSize);
	    max-width: 100%;
	    height: 100%;
	    width: unset;
	}

	#sudoku {
		justify-content: space-evenly;
	}

	#sudoku board,
	#sudoku controls {
		margin: 0;
	}

	#sudoku controls {
	    flex-direction: column;
	    aspect-ratio: unset;
	    flex: unset;
	}

	#sudoku controls button {
		height: calc(100% / 9);
		width: 100%;
	}

	#sudoku controls button:nth-child(3n) {
		border-bottom-width: 1px;
	}
}

@media screen and (max-width: 1023px) {
	html, body {
		font-size: 15px;
	}

	menu {
		font-size: 3.25em;
	}

	#sudoku {
		gap: 0;
	}
}

@media screen and (max-width: 767px) {
	html, body {
		font-size: 14px;
	}

	menu menuoption {
		min-width: 225px;
	}

	#blackjack player controls {
		font-size: 10px;
	}

	#blackjack player controls>group {
		width: 100%;
		margin: 0;
	}

	#blackjack player controls button:not([type="backtomenu"]):not([type="fullscreen"]), 
	#blackjack player controls>group>group {
		flex: 1;
	}

	#blackjack player controls>group:last-child {
		justify-content: flex-end;    
		margin-left: auto;
	}

	#blackjack input {
		max-width: 100%;
	}
}

@media screen and (max-width: 499px) {
	html, body {
		font-size: 12px;
	}
}

@media screen and (max-width: 349px) {
	html, body {
		font-size: 10px;
	}

	button span {
		height: 24px;
		width: 24px;
	}
}

@media (orientation: landscape) and (max-width: 1199px) {
	html, body {
		font-size: 9px;
	}

	button[type='backtomenu'] span, 
	button[value='blackjack'] span, 
	button[type='info'] span {
		height: 24px;
		width: 24px;
	}

	#blackjack>controls {
		width: 174px;
	}

	#blackjack button:not([type=info]):not([type=backtomenu]), 
	#blackjack input {
		height: 52px;
		font-size: 2rem;
		line-height: 1.8;
		padding: 10px 20px;
	}

	#blackjack player controls>group {
		flex: 0 0 calc(50% - .5em);
	}

	#blackjack player controls>group:not(:first-child) {
		justify-content: flex-end;
	}

	#blackjack player controls>group:last-child {
		flex: 0 0 100%;
	}

	#blackjack player score img {
		display: none;
	}

	.card {
		max-height: calc(20vh);
	}

	#solitaire .card {
		max-width: calc(7vw);
	}
}

@media (orientation: landscape) and (max-width: 899px) {
	button[type='backtomenu'], 
	button[value='blackjack'], 
	button[type='info'] {
		padding: 8px;
	}

	#blackjack button:not([type=info]):not([type=backtomenu]), 
	#blackjack input {
		flex: unset !important;
		font-size: 1.5rem;
		padding: 5px 10px;
		max-width: 20vw;
		height: 40px;
	}

	#blackjack>controls {
		width: 138px;
	}
}