/* The game.php template: bar on top, the rest of the viewport is the game's. */

/* Exactly one screen, so panels scroll inside the game. Phones get the
   page scroll back, since stacked panels won't fit. */
body:has(> main.game) {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

@media (max-width: 40rem) {
	body:has(> main.game) { height: auto; min-height: 100dvh; }
}

.game-bar {
	flex: none;
	padding-block: var(--space-2xs);
}

.game {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.game > * { flex: 1; min-height: 0; }

.game-trophies {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.75em;
	border: var(--hairline) solid var(--border);
	border-radius: 100px;
	color: var(--fg-muted);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition);
}

.game-trophies:hover { color: var(--fg); border-color: var(--border-strong); }