.game-panel {
	box-shadow: var(--shadow);
	border-radius: 0 0 10px 10px;
}

.game-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--gap);
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, .02);
	border-radius: 10px 10px 0 0;
}

.game-title {
	margin: 0 0 6px;
	font-size: 16px;
}

.game-msg {
	margin: 0;
	color: var(--muted);
}

.game-msg.is-good {
	color: #b8f5c7;
}

.game-msg.is-warn {
	color: #ffb4b4;
}

.game-msg.is-hot {
	color: #ffd39a;
}

.game-msg.is-info {
	color: var(--muted);
}

.game-stats {
	display: flex;
	gap: 10px;
	align-items: center;
}

.game-body {
	padding: 14px;
	display: grid;
	gap: 14px;
}

.prev-wrap {
	margin-top: 6px;
}

.prev-title {
	margin: 0 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--muted);
}

.prev-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.guess-pill {
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

#guess {
	width: 220px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
	color: var(--text);
	font-size: 16px;
}

#guess::placeholder {
	color: var(--muted);
}

@media (max-width: 760px) {
	.game-head {
		grid-template-columns: 1fr;
	}

	#guess {
		width: 100%;
	}
}

/* Difficulty row */
.game-diff {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}

.diff-label {
	align-self: center;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--muted);
}

.diff-seg {
	flex-wrap: wrap;
}

.diff-btn {
	background: var(--panel);
	border: 1px solid var(--border);
}

.diff-btn.is-active {
	background: linear-gradient(180deg, var(--accent-light), var(--accent));
	color: #fff;
	border: none;
	box-shadow: 0 10px 28px var(--accent-weak);
}