:root {
	--bg: #14121f;
	--bg-alt: #1e1b2e;
	--card: #262239;
	--text: #f4f2fb;
	--muted: #9a92b8;
	--accent: #ff4d8d;
	--accent2: #4dd6ff;
	--good: #4dffa1;
	--warn: #ffcf4d;
	--danger: #ff5c5c;
	--radius: 16px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3 { margin: 0 0 0.4em; }

.muted { color: var(--muted); }

button {
	font: inherit;
	cursor: pointer;
	border: none;
	border-radius: var(--radius);
	padding: 14px 22px;
	font-weight: 700;
	background: var(--accent);
	color: white;
	min-height: 48px;
	transition: transform 0.1s ease, opacity 0.1s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.secondary { background: var(--bg-alt); color: var(--text); border: 1px solid var(--card); }
button.accent2 { background: var(--accent2); color: #062430; }
button.danger { background: var(--danger); }
button.small { padding: 8px 14px; min-height: 36px; font-size: 0.85em; }

input[type="text"] {
	font: inherit;
	background: var(--bg-alt);
	border: 2px solid var(--card);
	color: var(--text);
	border-radius: var(--radius);
	padding: 14px 16px;
	min-height: 48px;
	width: 100%;
}
input[type="text"]:focus { outline: none; border-color: var(--accent2); }

.card {
	background: var(--card);
	border-radius: var(--radius);
	padding: 20px;
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.grow { flex: 1; }

.screen {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px;
	max-width: 480px;
	margin: 0 auto;
	width: 100%;
}

.badge {
	display: inline-block;
	background: var(--bg-alt);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.8em;
	color: var(--muted);
}
.badge.connected { color: var(--good); }
.badge.disconnected { color: var(--danger); }

.error-banner {
	background: var(--danger);
	color: white;
	padding: 10px 16px;
	border-radius: var(--radius);
	font-weight: 600;
}

.timer-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--bg-alt);
	overflow: hidden;
}
.timer-bar > div {
	height: 100%;
	background: var(--accent2);
	transition: width 0.2s linear;
}

.player-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-alt);
	border-radius: 999px;
	padding: 8px 14px;
}
.player-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.player-chip.offline .dot { background: var(--danger); }
.player-chip.offline { opacity: 0.5; }

/* --- TV specific ---------------------------------------------------- */

body.tv .screen {
	max-width: 1100px;
	padding: 40px;
}

.lobby-code {
	font-size: 6rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	color: var(--accent2);
	line-height: 1;
}

.qr-box {
	margin-top: 16px;
	background: white;
	border-radius: var(--radius);
	padding: 16px;
	width: 288px;
	height: 288px;
}
.qr-box iframe {
	width: 256px;
	height: 256px;
	border: none;
	display: block;
}

.tv-players-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.game-option {
	border: 2px solid var(--card);
	background: var(--bg-alt);
	border-radius: var(--radius);
	padding: 16px;
	text-align: left;
	cursor: pointer;
	width: 100%;
}
.game-option.selected { border-color: var(--accent); }
.game-option h3 { margin-bottom: 4px; }

.matchup-answer {
	background: var(--bg-alt);
	border-radius: var(--radius);
	padding: 24px;
	font-size: 1.4rem;
	flex: 1;
	position: relative;
}
.matchup-answer .votes {
	position: absolute;
	top: 12px;
	right: 16px;
	color: var(--accent2);
	font-weight: 800;
}
.matchup-answer .author {
	margin-top: 12px;
	color: var(--muted);
	font-size: 0.7em;
}

.scoreboard-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;
	background: var(--bg-alt);
	border-radius: var(--radius);
	font-size: 1.2rem;
}
.scoreboard-row:first-child { border: 2px solid var(--accent); }

/* --- Catch Phrase ---------------------------------------------------- */

.player-chip.current-turn {
	border: 2px solid var(--accent);
	box-shadow: 0 0 12px var(--accent);
}

.buzzer-orb {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--accent2), var(--bg-alt) 70%);
	border: 4px solid var(--bg-alt);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.buzzer-orb.pulse {
	transform: scale(1.08);
	box-shadow: 0 0 30px var(--accent2);
}
.buzzer-orb.buzz {
	transform: scale(1.2);
	background: radial-gradient(circle at 35% 30%, var(--danger), #4a0000 70%);
	box-shadow: 0 0 60px var(--danger);
}

.catchphrase-toast {
	margin-top: 16px;
	font-size: 1.3rem;
	font-weight: 700;
	min-height: 1.6em;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.catchphrase-toast.visible { opacity: 1; }

.phone-pulse-indicator {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--bg-alt);
	transition: background 0.1s ease, box-shadow 0.1s ease;
}
.phone-pulse-indicator.pulse {
	background: var(--accent2);
	box-shadow: 0 0 16px var(--accent2);
}
.phone-pulse-indicator.buzz {
	background: var(--danger);
	box-shadow: 0 0 24px var(--danger);
}