/* Connections, the player's page. The room, lobby and standings come from
   /assets/css/live.css; the grid from connections.css. */

.live-app[data-screen="play"] .screen-play {
	display: block;
	animation: screen-in 0.4s var(--ease-out);
}

.my-score {
	padding: 1px 12px;
	border: var(--border);
	border-radius: 50px;
	background: var(--surface);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.guess-name {
	margin-top: 16px;
}

.status {
	display: grid;
	justify-items: center;
	gap: 4px;
	margin-top: 16px;
	padding: 18px;
	text-align: center;
	animation: pop-in 0.4s var(--ease-spring);
}

.status-title {
	font-weight: 800;
	font-size: 24px;
	font-stretch: 85%;
}

.status-text {
	color: var(--muted);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.status-result:not(.is-miss) {
	background: var(--cat);
	box-shadow: var(--shadow-lg);
}

.status-result.is-miss {
	border-style: dashed;
	background: transparent;
}

.status-points {
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 960px) {
	.live-app[data-screen="play"] {
		max-width: 720px;
	}
}