.f4a-standalone-game {
	margin: 1.5rem 0;
}

.f4a-game-panel {
	display: grid;
	gap: 1rem;
}

.f4a-reaction-target {
	display: grid;
	place-items: center;
	width: min(100%, 34rem);
	min-height: 12rem;
	margin: 0 auto;
	padding: 1rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 1rem;
	background: #803333;
	color: #fff;
	font: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
}

.f4a-reaction-target.is-waiting {
	background: #8a6a24;
}

.f4a-reaction-target.is-ready {
	background: #188a4b;
}

.f4a-game-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: center;
}

.f4a-game-counter {
	display: inline-flex;
	gap: .35rem;
	align-items: baseline;
	padding: .55rem .8rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 999px;
	background: var(--f4a-surface, #fff);
}

.f4a-game-inline-control {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
}

.f4a-game-inline-control select {
	min-height: 2.4rem;
}

.f4a-game-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: .75rem;
}

.f4a-game-results > div {
	padding: 1rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .85rem;
	background: var(--f4a-surface, #fff);
}

.f4a-game-results span,
.f4a-game-results strong {
	display: block;
}

.f4a-game-results strong {
	margin-top: .25rem;
	font-size: 1.4rem;
}

.f4a-game-status {
	min-height: 1.5rem;
	text-align: center;
}

.f4a-memory-grid,
.f4a-lights-grid,
.f4a-sliding-grid,
.f4a-2048-board,
.f4a-game-board {
	width: min(100%, 24rem);
	margin: 0 auto;
}

.f4a-game-board {
	display: grid;
	gap: .5rem;
}

.f4a-memory-grid,
.f4a-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
}

.f4a-memory-card {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .85rem;
	background: var(--f4a-surface, #fff);
	color: var(--f4a-text, #17202a);
	font: inherit;
	font-weight: 800;
}

.f4a-memory-card.is-visible,
.f4a-memory-card.is-matched {
	background: #87a800;
	color: #132000;
}

.f4a-memory-card.is-matched {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

.f4a-lights-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .45rem;
}

.f4a-grid-5 {
	grid-template-columns: repeat(5, 1fr);
	gap: .45rem;
}

.f4a-grid-8 {
	grid-template-columns: repeat(8, 1fr);
	gap: .25rem;
}

.f4a-grid-10 {
	grid-template-columns: repeat(10, 1fr);
	gap: .2rem;
}

.f4a-light-cell {
	aspect-ratio: 1;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .65rem;
	background: var(--f4a-surface, #fff);
	font: inherit;
}

.f4a-light-cell.is-on {
	background: #ffd45a;
	box-shadow: 0 0 1rem rgba(255, 212, 90, .45);
}

.f4a-sliding-grid,
.f4a-2048-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	padding: .5rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--f4a-surface, #fff) 86%, #87a800);
}

.f4a-sliding-tile,
.f4a-2048-tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .75rem;
	background: var(--f4a-surface, #fff);
	color: var(--f4a-text, #17202a);
	font: inherit;
	font-size: clamp(1rem, 5vw, 1.8rem);
	font-weight: 800;
}

.f4a-sliding-tile.is-empty {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.f4a-2048-board {
	width: min(100%, 18rem);
	outline-offset: .25rem;
	touch-action: none;
}

.f4a-2048-tile {
	background: rgba(255, 255, 255, .65);
}

.f4a-2048-tile.tile-2 { background: #eee4da; color: #132000; }
.f4a-2048-tile.tile-4 { background: #ede0c8; color: #132000; }
.f4a-2048-tile.tile-8 { background: #f2b179; color: #fff; }
.f4a-2048-tile.tile-16 { background: #f59563; color: #fff; }
.f4a-2048-tile.tile-32 { background: #f67c5f; color: #fff; }
.f4a-2048-tile.tile-64 { background: #f65e3b; color: #fff; }
.f4a-2048-tile.tile-128,
.f4a-2048-tile.tile-256,
.f4a-2048-tile.tile-512,
.f4a-2048-tile.tile-1024,
.f4a-2048-tile.tile-2048 {
	background: #87a800;
	color: #132000;
	font-size: clamp(.85rem, 4vw, 1.45rem);
}

@supports not (background: color-mix(in srgb, white, black)) {
	.f4a-sliding-grid,
	.f4a-2048-board {
		background: #253018;
	}
}

.f4a-game-cell,
.f4a-answer-button,
.f4a-mine-cell,
.f4a-word-cell,
.f4a-nuri-cell,
.f4a-net-cell {
	display: grid;
	place-items: center;
	min-height: 2.4rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .65rem;
	background: var(--f4a-surface, #fff);
	color: var(--f4a-text, #17202a);
	font: inherit;
	font-weight: 700;
}

.f4a-quiz-board {
	display: grid;
	gap: .75rem;
}

.f4a-flag,
.f4a-flag-big {
	padding: 1rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 0;
	background: var(--f4a-surface, #fff);
	text-align: center;
}

.f4a-flag-big {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(7rem, 30vw, 15rem);
	line-height: 1;
	cursor: pointer;
	border-radius: 0 !important;
	overflow: hidden;
}

.f4a-flag-img {
	display: block;
	width: min(100%, 24rem);
	max-height: 15rem;
	object-fit: contain;
	border-radius: 0 !important;
}

.f4a-flag-board {
	width: min(100%, 34rem);
}

.f4a-flag-details {
	display: grid;
	gap: .35rem;
	padding: 1rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 1rem;
	background: var(--f4a-surface, #fff);
	text-align: center;
}

.f4a-flag-details strong {
	font-size: 1.35rem;
}

.f4a-question {
	padding: 1rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 1rem;
	background: var(--f4a-surface, #fff);
	font-size: 1.25rem;
	font-weight: 800;
	text-align: center;
}

.f4a-answer-button:hover,
.f4a-game-cell:hover,
.f4a-word-cell:hover {
	border-color: #87a800;
}

.f4a-simon-board {
	grid-template-columns: repeat(2, minmax(6rem, 1fr));
	width: min(100%, 22rem);
}

.f4a-simon-pad {
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 1.25rem;
	filter: brightness(.75);
}

.f4a-simon-pad.green { background: #2e9d58; }
.f4a-simon-pad.red { background: #b93d3d; }
.f4a-simon-pad.yellow { background: #c5a52d; }
.f4a-simon-pad.blue { background: #3f69c8; }
.f4a-simon-pad.is-lit {
	filter: brightness(1.45);
	box-shadow: 0 0 1.5rem rgba(255, 255, 255, .55);
}

.f4a-mine-cell,
.f4a-word-cell,
.f4a-nuri-cell,
.f4a-net-cell {
	aspect-ratio: 1;
	min-height: 0;
	padding: 0;
}

.f4a-mine-cell.is-open {
	background: color-mix(in srgb, var(--f4a-surface, #fff) 70%, #87a800);
}

.f4a-mine-cell.is-mine {
	background: #9b2f2f;
	color: #fff;
}

.f4a-mine-cell.is-flagged {
	background: #c5a52d;
	color: #132000;
}

.f4a-word-cell.is-selected {
	background: #87a800;
	color: #132000;
}

.f4a-nuri-cell.is-clue {
	background: #87a800;
	color: #132000;
}

.f4a-nuri-cell.is-sea {
	background: #20354e;
	color: #fff;
}

.f4a-nuri-cell.is-island {
	background: #dac78a;
	color: #132000;
}

.f4a-nuri-cell.is-wrong {
	outline: 2px solid #d65a38;
	outline-offset: -2px;
}

.f4a-net-cell {
	position: relative;
	overflow: hidden;
	font-size: 1.35rem;
	transition: transform .15s ease;
}

.f4a-net-arm,
.f4a-net-core {
	position: absolute;
	background: #6f7f91;
	transition: background .15s ease, box-shadow .15s ease;
}

.f4a-net-arm.n,
.f4a-net-arm.s {
	left: calc(50% - .13rem);
	width: .26rem;
	height: 50%;
}

.f4a-net-arm.n { top: 0; display: none; }
.f4a-net-arm.s { bottom: 0; display: none; }

.f4a-net-arm.e,
.f4a-net-arm.w {
	top: calc(50% - .13rem);
	width: 50%;
	height: .26rem;
}

.f4a-net-arm.e { right: 0; display: none; }
.f4a-net-arm.w { left: 0; display: none; }

.f4a-net-core {
	inset: calc(50% - .45rem);
	z-index: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #132000;
	font-size: 1rem;
	line-height: 1;
}

.f4a-net-cell.has-n .f4a-net-arm.n,
.f4a-net-cell.has-e .f4a-net-arm.e,
.f4a-net-cell.has-s .f4a-net-arm.s,
.f4a-net-cell.has-w .f4a-net-arm.w {
	display: block;
}

.f4a-net-cell.is-powered .f4a-net-arm,
.f4a-net-cell.is-powered .f4a-net-core {
	background: #87a800;
	box-shadow: 0 0 .75rem rgba(135, 168, 0, .45);
}

.f4a-net-cell.is-source {
	background: #87a800;
	color: #132000;
	box-shadow: 0 0 1rem rgba(135, 168, 0, .45);
}

.f4a-net-cell.is-source .f4a-net-arm {
	background: #132000;
	box-shadow: 0 0 .35rem rgba(19, 32, 0, .35);
}

.f4a-net-cell.is-source .f4a-net-core {
	background: #d8f75a;
	border: 1px solid rgba(19, 32, 0, .45);
	box-shadow: 0 0 .55rem rgba(216, 247, 90, .65);
}

.f4a-net-cell.is-load {
	background: #4b2f78;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
}

.f4a-net-cell.is-load .f4a-net-core {
	background: #4b2f78;
	filter: grayscale(.8);
}

.f4a-net-cell.is-load.is-on {
	background: #ffd84d;
	color: #132000;
	box-shadow: 0 0 1.1rem rgba(255, 216, 77, .75);
}

.f4a-net-cell.is-load.is-on .f4a-net-core {
	background: #ffd84d;
	filter: none;
}

.f4a-rule-card {
	grid-column: 1 / -1;
	padding: .75rem .9rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .8rem;
	background: var(--f4a-surface, #fff);
	color: var(--f4a-muted, #626a76);
	font-size: .95rem;
	line-height: 1.45;
}

.f4a-mastermind-board {
	display: grid;
	gap: .75rem;
	width: min(100%, 30rem);
}

.f4a-mm-picker {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.f4a-mm-current,
.f4a-mm-dots {
	display: flex;
	gap: .4rem;
	align-items: center;
	justify-content: center;
}

.f4a-mm-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
	padding: .6rem .8rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: .65rem;
	background: var(--f4a-surface, #fff);
	text-align: center;
}

.f4a-mm-history {
	display: grid;
	gap: .5rem;
}

.f4a-mm-peg,
.f4a-mm-dot {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
}

.f4a-mm-dot {
	width: 1.8rem;
	height: 1.8rem;
	overflow: hidden;
	text-indent: -999px;
}

.f4a-mm-dot.is-empty {
	background: transparent;
	border-style: dashed;
	text-indent: 0;
}

.peg-R { background: #b93d3d; }
.peg-G { background: #2e9d58; }
.peg-B { background: #3f69c8; }
.peg-Y { background: #c5a52d; color: #132000; }
.peg-P { background: #7b4bb3; }
.peg-O { background: #c76f2b; }

.f4a-arcade-grid {
	grid-template-columns: repeat(12, 1fr);
	gap: .15rem;
	width: min(100%, 24rem);
	padding: .5rem;
	border: 1px solid var(--f4a-border, #3a4652);
	border-radius: 1rem;
	background: #101820;
}

.f4a-arcade-cell {
	aspect-ratio: 1;
	border-radius: .2rem;
	background: rgba(255, 255, 255, .08);
}

.f4a-arcade-cell.is-player {
	background: #87a800;
}

.f4a-arcade-cell.is-bullet {
	background: #fff;
}

.f4a-arcade-cell.is-enemy {
	background: #d65a38;
}

.f4a-arcade-cell.is-food,
.f4a-arcade-cell.is-ball {
	background: #d8c24a;
	border-radius: 50%;
	box-shadow: 0 0 .65rem rgba(216, 194, 74, .55);
}

.f4a-arcade-cell.is-snake {
	background: #87a800;
	border-radius: .35rem;
}

.f4a-arcade-cell.is-head {
	position: relative;
	background: #b7dc1a;
}

.f4a-arcade-cell.is-head::after {
	position: absolute;
	top: 28%;
	left: 55%;
	width: .28rem;
	height: .28rem;
	border-radius: 50%;
	background: #101820;
	content: "";
}

.f4a-arcade-cell.is-brick {
	background: #d65a38;
}

.f4a-arcade-cell.is-paddle {
	background: #87a800;
}