/*
 * /play — the picker and the live-table chrome.
 *
 * Only the bits the watch stylesheets do not already provide: the board itself
 * is `watch-new-scoreboard.css`, and every colour here is one of its tokens
 * (`watch-new-tokens.css`) so the two halves of the page cannot drift apart.
 */

.play-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	color: var(--text-primary);
	font-family: var(--font-ui);
}

.play-page h1 {
	color: var(--text-bright);
	margin: 0 0 8px;
}

.play-page > p {
	color: var(--text-muted);
	max-width: 62ch;
	margin: 0 0 24px;
}

.play-roster {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
	display: grid;
	/* auto-fit + minmax, so the roster reflows to one column on a phone
	   without a breakpoint to keep in sync with the island. */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.play-roster-entry {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	height: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--bg-elevated);
	border-radius: 10px;
	background: var(--bg-card);
	color: var(--text-primary);
	font: inherit;
	cursor: pointer;
}

button.play-roster-entry:hover:not(:disabled) {
	border-color: var(--accent-gold-warm);
}

.play-roster-entry:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.play-roster-entry.is-picked {
	border-color: var(--accent-gold);
	box-shadow: inset 0 0 0 1px var(--accent-gold);
}

.play-roster-entry strong {
	color: var(--text-bright);
}

.play-roster-entry span {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.play-roster-entry em {
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--felt-green);
}

.play-picker-count {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin: 0 0 12px;
}

.play-start,
.play-leave {
	padding: 10px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--accent-red);
	color: var(--text-bright);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.play-start:disabled,
.play-leave:disabled {
	opacity: 0.6;
	cursor: progress;
}

.play-leave {
	background: var(--bg-elevated);
	margin-left: auto;
}

.play-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.play-table-id {
	font-family: var(--font-mono);
	color: var(--text-muted);
}

.play-status {
	color: var(--accent-gold);
}

.play-error {
	color: var(--accent-red);
}

.play-signin a {
	color: var(--accent-gold);
}