/* Sized for the Tesla center screen (~1920x1200 landscape); light by day, dark by night. */
:root {
	--bg: #ececee;
	--card: #fff;
	--dock: #dfdfe2;
	--shadow: 0 1px 2px #0000000f, 0 2px 8px #0000000a;
	--text: #171a20;
	--muted: #6b6e75;
	--accent: #3e6ae1;
	--correct: #1fa463;
	--danger: #e5484d;
	--radius: 16px;
	--chamfer: 0px;
	--mono: ui-monospace, "SF Mono", Menlo, monospace;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0d0d0e;
		--card: #1f2023;
		--dock: #18181a;
		--shadow: none;
		--text: #f2f2f3;
		--muted: #8d9097;
		--accent: #5b84f0;
	}
}

* { box-sizing: border-box; }

body {
	display: grid;
	grid-template-columns: auto 1fr;
	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 500 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Static instructions for voice assistants; hidden until the script takes over. */
#board:not(.board) { visibility: hidden; }

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

.card {
	background: var(--card);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}

.icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sidebar */
#dock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2vh;
	width: clamp(5rem, 7vw, 8.5rem);
	padding: 3vh 0;
	background: var(--dock);
}
.dock-clock {
	font-size: clamp(1.1rem, 2.6vh, 1.8rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.dock-apps {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2vh;
}
.dock-item {
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 8vh, 6rem);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 22%;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: clamp(1.75rem, 4.2vh, 3rem);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.1s;
}
.dock-item:hover { color: var(--text); }
.dock-item.is-active { background: var(--accent); color: #fff; }
.dock-theme { font-size: clamp(1.4rem, 3.4vh, 2.4rem); }

/* Touch feedback */
.dock-item:active, a.card:active { transform: scale(0.96); }
a.card { transition: transform 0.1s; }

/* Main board */
.board {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 3vh 3vw;
	gap: 3vh;
}

.bar {
	display: flex;
	justify-content: space-between;
	font-size: clamp(1rem, 2.4vh, 1.6rem);
	color: var(--muted);
}
.bar-title { color: var(--text); font-weight: 600; }

.stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4.5vh;
}
.state-idle .stage,
.next,
.state-score .question,
.state-end .question,
.state-hall .question,
.clue { text-align: center; }
.state-idle .muted,
.next .muted { margin: 0; font-size: clamp(1.1rem, 3vh, 2rem); }

.question {
	margin: 0;
	font-size: clamp(1.75rem, 6vh, 4.5rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.eyebrow {
	margin: 0;
	color: var(--accent);
	font-size: clamp(1.1rem, 3vh, 2rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Answer choices */
.choices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6vh 1.2vw;
}
.choices.count-1, .choices.count-3 { grid-template-columns: 1fr; }

.choice {
	display: flex;
	align-items: center;
	gap: 1.4vw;
	padding: 3vh 2vw;
	font-size: clamp(1.4rem, 4vh, 3rem);
	text-align: start;
	transition: opacity 0.3s, background 0.3s;
}
.choice .muted { min-width: 1.2em; font-size: 0.75em; font-weight: 600; }
.choice.is-correct { background: var(--correct); color: #fff; }
.choice.is-correct .muted { color: inherit; opacity: 0.8; }
.choice.is-dim { opacity: 0.5; }
.clue .choice { justify-content: center; }

.verdict {
	font-size: clamp(1.5rem, 4.5vh, 3.25rem);
	font-weight: 600;
	color: var(--accent);
	text-align: center;
}
.wagers { margin: 0; font-size: clamp(1rem, 2.6vh, 1.75rem); }

/* Score strip under questions */
.strip {
	display: flex;
	justify-content: center;
	gap: 1vw;
}
/* Whose turn it is */
.chip.is-up { box-shadow: var(--shadow), inset 0 0 0 2px var(--accent); }
.next .question { font-size: clamp(2.5rem, 11vh, 8rem); font-weight: 600; }

.chip {
	display: flex;
	gap: 0.6em;
	padding: 1vh 1.4vw;
	background: var(--card);
	box-shadow: var(--shadow);
	border-radius: 999px;
	font-size: clamp(1rem, 2.6vh, 1.75rem);
}

/* Scoreboard; 4-6 players go two columns, ranked down then across. */
.scores {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: min(100%, 56rem);
	display: grid;
	gap: 1.4vh;
}
.scores:is(.count-4, .count-5, .count-6) {
	width: min(100%, 84rem);
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	column-gap: 1.4vw;
}
.score-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 2.4vh 2.2vw;
	font-size: clamp(1.4rem, 4.2vh, 3.25rem);
}
.score-value { font-variant-numeric: tabular-nums; }
.score-row.is-leader { box-shadow: var(--shadow), inset 0 0 0 3px var(--accent); }
.is-leader .score-value { color: var(--accent); font-weight: 600; }
.state-hall .score-row { font-size: clamp(1.2rem, 3.4vh, 2.5rem); }

/* Home launcher */
.launcher {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: 1.6vh 1.2vw;
}
.tile {
	display: flex;
	flex-direction: column;
	gap: 1.2vh;
	padding: 3.5vh 2vw;
	font-size: clamp(1rem, 2.4vh, 1.6rem);
}
.tile .icon { font-size: 2.6em; color: var(--accent); }
.tile strong { font-size: 1.5em; font-weight: 600; }
.tile-say { margin-top: auto; color: var(--accent); }

/* Category board */
.grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 6), 1fr);
	gap: 1.2vh 0.8vw;
}
.grid-cat {
	display: grid;
	place-items: end center;
	min-height: 7vh;
	padding-bottom: 0.6vh;
	color: var(--muted);
	font-size: clamp(0.9rem, 2.4vh, 1.6rem);
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.grid-cell {
	display: grid;
	place-items: center;
	height: 11vh;
	color: var(--accent);
	font-size: clamp(1.3rem, 4.4vh, 3.25rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.grid-cell.is-used { background: transparent; box-shadow: inset 0 0 0 2px var(--card); }
.grid-cell.is-current { background: var(--accent); color: #fff; }

/* Effects */
@property --left {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%;
}

.fx-timer {
	position: absolute;
	top: 1.6vh;
	left: 50%;
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 9vh;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, var(--bg) 84%, transparent 85%),
		conic-gradient(var(--accent) var(--left), var(--card) 0);
	font-size: 3.4vh;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	animation: drain var(--duration) linear forwards;
}
.fx-timer.is-done { color: var(--danger); }
@keyframes drain { to { --left: 0%; } }

.fx-confetti {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.fx-confetti i {
	position: absolute;
	top: -4vh;
	left: var(--x);
	width: 1vh;
	height: 1.6vh;
	border-radius: 2px;
	background: var(--color);
	animation: fall var(--time) cubic-bezier(0.3, 0.6, 0.6, 1) var(--delay) both;
}
@keyframes fall { to { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--spin)); } }

/*
 * Cyber theme: stainless and neon, hard angles. theme=cyber or the sidebar toggle.
 * Cards keep their layout; only surfaces, corners, and type change.
 */
:root[data-theme="cyber"] {
	--bg: #060708;
	--card: #15181c;
	--dock: #0b0c0e;
	--shadow: none;
	--text: #e9edf2;
	--muted: #7c8591;
	--accent: #29e3ff;
	--correct: #3dff8b;
	--danger: #ff3b47;
	--radius: 0px;
	--chamfer: 14px;
	color-scheme: dark;
}

[data-theme="cyber"] body {
	background:
		linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 100% 48px,
		linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 48px 100%,
		var(--bg);
}

[data-theme="cyber"] .card,
[data-theme="cyber"] .chip,
[data-theme="cyber"] .dock-item {
	border-radius: 0;
	clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
[data-theme="cyber"] .card {
	background: linear-gradient(135deg, #1d2126, #101215 60%);
	box-shadow: inset 0 0 0 1px #2b3138;
}
[data-theme="cyber"] .chip { --chamfer: 8px; background: #15181c; }
[data-theme="cyber"] .dock-item { --chamfer: 10px; }
[data-theme="cyber"] #dock { border-inline-end: 1px solid #1f2328; }

[data-theme="cyber"] .bar,
[data-theme="cyber"] .grid-cat,
[data-theme="cyber"] .eyebrow,
[data-theme="cyber"] .dock-clock,
[data-theme="cyber"] .choice .muted {
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
[data-theme="cyber"] .question { font-weight: 600; letter-spacing: -0.02em; }
[data-theme="cyber"] .grid-cell,
[data-theme="cyber"] .score-value,
[data-theme="cyber"] .chip,
[data-theme="cyber"] .fx-timer { font-family: var(--mono); }

[data-theme="cyber"] .dock-item.is-active,
[data-theme="cyber"] .grid-cell.is-current { background: var(--accent); color: #031014; }
[data-theme="cyber"] .choice.is-correct { background: var(--correct); color: #03140a; box-shadow: 0 0 32px #3dff8b55; }
[data-theme="cyber"] .grid-cell.is-used { background: transparent; box-shadow: inset 0 0 0 1px #1f2328; }
[data-theme="cyber"] .score-row.is-leader { box-shadow: inset 0 0 0 2px var(--accent); }
[data-theme="cyber"] .verdict,
[data-theme="cyber"] .tile .icon { text-shadow: 0 0 18px #29e3ff88; }
[data-theme="cyber"] .fx-timer { background: radial-gradient(closest-side, var(--bg) 84%, transparent 85%), conic-gradient(var(--accent) var(--left), #1f2328 0); }

/* Confirmation dialog */
.confirm {
	width: min(92vw, 34rem);
	padding: 4vh 2.6vw 3vh;
	border: 0;
	border-radius: var(--radius);
	background: var(--card);
	color: var(--text);
	box-shadow: 0 24px 64px #00000040;
	font-size: clamp(1rem, 2.4vh, 1.5rem);
}
.confirm::backdrop { background: #0000008c; }
.confirm h2 { margin: 0 0 1.5vh; font-size: 1.4em; font-weight: 600; }
.confirm p { margin: 0 0 3.5vh; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 1vw; }
.button {
	min-width: 7em;
	padding: 1.4vh 1.6vw;
	border: 0;
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.button.is-danger { background: var(--danger); color: #fff; }
[data-theme="cyber"] .confirm,
[data-theme="cyber"] .button {
	border-radius: 0;
	clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
[data-theme="cyber"] .button { --chamfer: 8px; }

/* Final-screen credit: small and quiet */
.credit {
	align-self: center;
	color: color-mix(in srgb, var(--muted) 75%, var(--text));
	font-size: clamp(0.75rem, 1.6vh, 1rem);
}
.credit:hover { color: var(--text); }