/* Shared chrome for every game under /games: the bar, the toggles and the hub
   list. A game's own board styling lives in its own file. */
.sb-game-page {
	min-height: 100dvh;
	background: linear-gradient(180deg, #fff8ec, #fdf1de 58%, #f8e6cc);
	color: #5a3318;
}

.sb-game-shell {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 12px 16px calc(env(safe-area-inset-bottom) + 20px);
}

.sb-game-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0 12px;
}

.sb-game-back {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(179, 104, 40, .28);
	border-radius: 50%;
	background: #fffdf8;
	color: #a2551f;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.sb-game-heading {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-game-heading strong {
	display: block;
	color: #7d3f14;
	font-size: 17px;
	line-height: 1.2;
}

.sb-game-heading span {
	display: block;
	margin-top: 2px;
	color: #9a7250;
	font-size: 11.5px;
	line-height: 1.35;
}

.sb-game-switches {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
}

.sb-game-switch {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(179, 104, 40, .22);
	border-radius: 50%;
	background: #fffdf8;
	font-size: 15px;
	line-height: 1;
	opacity: .38;
	cursor: pointer;
	transition: opacity .18s, box-shadow .18s;
}

.sb-game-switch.is-on {
	opacity: 1;
	box-shadow: 0 0 0 2px rgba(242, 166, 74, .28);
}

/* Hub */
.sb-game-bar--hub {
	padding-top: 14px;
}

.sb-game-list {
	display: grid;
	gap: 10px;
}

.sb-game-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid rgba(179, 104, 40, .18);
	border-radius: 18px;
	background: #fffdf8;
	box-shadow: 0 6px 18px rgba(150, 90, 40, .07);
	color: inherit;
	text-decoration: none;
}

.sb-game-card-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: radial-gradient(circle at 32% 26%, #ffdca3, #ec8f2f 68%);
	font-size: 24px;
}

.sb-game-card-text {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-game-card-text strong {
	display: block;
	color: #7d3f14;
	font-size: 15.5px;
}

.sb-game-card-text small {
	display: block;
	margin-top: 3px;
	color: #9a7250;
	font-size: 12px;
	line-height: 1.4;
}

.sb-game-card-go {
	flex: 0 0 auto;
	color: #c07a33;
	font-size: 22px;
	line-height: 1;
}

.sb-game-empty {
	padding: 40px 10px;
	color: #9a7250;
	font-size: 14px;
	text-align: center;
}