/*
 * Shared modern layer for the game board (play + offline "grab" builds).
 *
 * Loaded on top of a legacy base (bootstrap + style.css, or the inlined
 * equivalent in the grab views), so it must come last and leans on
 * !important where it collides with those older rules.
 *
 * Offline builds inline this file, so keep it free of url() references.
 */

/* Style block 4 */
body {
				background: linear-gradient(180deg, #09090b 0, #09090b 330px, #fff 330px, #fff 100%) !important;
				color: #18181b !important;
				font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
				font-size: 15px !important;
				line-height: 1.6 !important;
				padding: 0 8px 36px !important;
			}
			a {
				color: #18181b;
				font-weight: 700;
			}
			a:hover {
				color: #09090b;
				text-decoration: none;
			}
			.container-narrow {
				width: 100%;
				max-width: none;
				box-sizing: border-box;
				padding-top: 28px;
			}
			#pad {
				width: 100%;
				max-width: none;
				margin-right: auto;
				margin-left: auto;
				padding: 12px;
				box-sizing: border-box;
				border-radius: 8px;
				background: #09090b;
				box-shadow: 0 18px 48px rgba(9, 9, 11, 0.2);
			}
			.btn {
				border-radius: 7px !important;
				border: 1px solid #d4d4d8 !important;
				background: #fff !important;
				background-image: none !important;
				box-shadow: none !important;
				color: #18181b !important;
				text-shadow: none !important;
				font-weight: 700 !important;
			}
			.btn:hover {
				background: #f4f4f5 !important;
				color: #09090b !important;
			}
			.btn-large {
				padding: 12px 18px !important;
				font-size: 16px !important;
				line-height: 20px !important;
			}
			.btn-success {
				border-color: #09090b !important;
				background: #09090b !important;
				color: #fff !important;
			}
			.btn-success:hover {
				border-color: #27272a !important;
				background: #27272a !important;
				color: #fff !important;
			}
			#headline {
				background: #18181b !important;
				color: #fafafa !important;
				font-weight: 800;
				letter-spacing: 0;
			}
			div#answer a,
			div#final_answer a,
			div#double_jeopardy a,
			div#jeopardy_round a {
				background: #0f3aa8 !important;
				border: 1px solid rgba(255, 255, 255, 0.2);
				box-sizing: border-box;
				color: #fff !important;
				font-weight: 800 !important;
				text-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
			}
			div#answer a:hover,
			div#final_answer a:hover,
			div#double_jeopardy a:hover,
			div#jeopardy_round a:hover {
				background: #1741b8 !important;
			}
			#prompt,
			#final_prompt,
			#final_prompt2 {
				border: 0 !important;
				border-radius: 8px;
				/* Same blue as the board tiles, so opening a question feels like
				   the classic Jeopardy board zooming in rather than a separate
				   dark modal. The dimmed backdrop still makes it stand out. */
				background: #0f3aa8 !important;
				box-shadow: 0 18px 48px rgba(9, 9, 11, 0.24);
			}
			#score,
			#score2,
			#score3,
			#score4 {
				font-weight: 700;
			}
			hr {
				border: 0;
				border-top: 1px solid #e5e7eb;
				border-bottom: 0;
			}
			.footer {
				color: #64748b;
				text-align: center;
			}
			/* This layer now loads after bootstrap, so the generic dark `a`
			   colour above finally applies. Keep inline links underlined so
			   they still read as links without bootstrap's blue. */
			.footer a {
				color: #18181b;
				text-decoration: underline;
			}
			@media (max-width: 767px) {
				body {
					padding: 0 4px 28px !important;
				}
				.container-narrow {
					padding-top: 14px;
				}
			}

/* Style block 5 */
.play-setup {
				max-width: 760px;
				margin: 0 auto 24px;
			padding: 26px;
			text-align: left;
			border: 1px solid #e4e4e7;
			border-radius: 8px;
			background: #fff;
			box-shadow: 0 18px 44px rgba(9, 9, 11, 0.18);
		}
		.play-setup__header {
			text-align: center;
			margin-bottom: 20px;
		}
		.play-setup__header h1 {
			margin-bottom: 8px;
			font-size: 34px;
			line-height: 1.15;
			color: #09090b;
		}
		.play-setup__hint {
			margin: 0;
			color: #52525b;
			font-size: 14px;
		}
		.play-setup__grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px;
			margin-bottom: 22px;
		}
		.play-field label {
			margin-bottom: 6px;
			color: #27272a;
			font-weight: bold;
		}
		.play-field select {
			width: 100%;
			height: 38px;
			box-sizing: border-box;
			border-color: #d4d4d8;
			border-radius: 6px;
			background: #fafafa;
			color: #18181b;
		}
		.play-actions {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 10px;
			margin-top: 10px;
			text-align: center;
		}
		.play-actions .btn {
			margin: 0;
		}
		.play-actions__secondary {
			display: inline-block;
			padding: 11px 18px;
			border: 1px solid #18181b;
			border-radius: 5px;
			color: #18181b;
			font-size: 16px;
			line-height: 20px;
			text-decoration: none;
			background: #fff;
		}
		.play-actions__secondary:hover {
			color: #fff;
			border-color: #18181b;
			text-decoration: none;
			background: #18181b;
		}
		/* The free "make your own" bridge — the step that turns a player into a
		   maker. Green accent signals free/positive, set apart from the black
		   Play Game and the paid membership card below. */
		.play-actions__make {
			border-color: #15803d;
			color: #15803d;
		}
		.play-actions__make:hover {
			border-color: #15803d;
			background: #15803d;
			color: #fff;
		}
		.play-member-note {
			margin: 18px auto 0;
			padding: 14px;
			max-width: 620px;
			border-radius: 6px;
			text-align: center;
			background: #f4f4f5;
			color: #52525b;
		}
			.play-member-note a {
				font-weight: bold;
				color: #18181b;
				text-decoration: underline;
			}
		/* Membership upsell, shown to anonymous players right under the locked
		   "(members only)" options so the pitch lands at the friction point. */
		.play-upsell {
			margin: 18px auto 0;
			padding: 18px 20px;
			max-width: 620px;
			border: 1px solid #e4e4e7;
			border-radius: 10px;
			background: #fafafa;
			text-align: left;
		}
		.play-upsell__head {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: space-between;
			gap: 4px 12px;
			margin-bottom: 12px;
		}
		.play-upsell__title {
			margin: 0;
			font-size: 17px;
			font-weight: 800;
			color: #09090b;
		}
		.play-upsell__price {
			color: #52525b;
			font-size: 13px;
		}
		.play-upsell__price del {
			color: #a1a1aa;
		}
		.play-upsell__price strong {
			color: #09090b;
			font-size: 20px;
			font-weight: 800;
		}
		.play-upsell__benefits {
			margin: 0 0 14px;
			padding: 0;
			list-style: none;
		}
		.play-upsell__benefits li {
			position: relative;
			padding: 3px 0 3px 24px;
			color: #27272a;
			font-size: 14px;
			line-height: 1.4;
		}
		.play-upsell__benefits li:before {
			content: "\2713"; /* check mark */
			position: absolute;
			left: 0;
			top: 3px;
			color: #15803d;
			font-weight: 800;
		}
		.play-upsell__cta {
			display: inline-block;
			padding: 11px 20px;
			border-radius: 6px;
			background: #09090b;
			color: #fff !important;
			font-size: 15px;
			font-weight: 700;
			text-decoration: none;
		}
		.play-upsell__cta:hover {
			background: #27272a;
			color: #fff !important;
			text-decoration: none;
		}
		.play-upsell__sub {
			display: block;
			margin-top: 10px;
			color: #71717a;
			font-size: 12px;
		}
		.play-upsell__sub a {
			color: #52525b;
			text-decoration: underline;
		}
			@media (max-width: 767px) {
				.play-setup {
					padding: 18px;
			}
			.play-setup__header h1 {
				font-size: 28px;
			}
			.play-setup__grid {
				grid-template-columns: 1fr;
			}
			.play-actions .btn,
				.play-actions__secondary {
					display: block;
					width: 100%;
					box-sizing: border-box;
				}
			}

/* Slightly larger play text for readability. */
#headline {
	font-size: 22px !important;
	line-height: 1.2 !important;
}

div#answer a,
div#final_answer a,
div#double_jeopardy a,
div#jeopardy_round a {
	font-size: 30px !important;
	line-height: 1.12 !important;
}

#answerx,
#final_answerx,
#final_answerx2 {
	font-size: 28px !important;
	line-height: 1.25 !important;
}

#questionx,
#final_questionx,
#final_questionx2,
#final_category,
#final_category2 {
	font-size: 24px !important;
	line-height: 1.25 !important;
}

#prompt a:link,
#prompt a:visited,
#final_prompt a:link,
#final_prompt a:visited,
#final_prompt2 a:link,
#final_prompt2 a:visited {
	font-size: 20px !important;
}

.play-setup__header h1 {
	font-size: 38px !important;
}

/* Tall screens are the F11-on-a-projector case the setup card tells people to
   use. The panel grows there, so the type grows with it — otherwise it is just
   a bigger empty box. */
@media (min-height: 900px) {
	#answerx,
	#final_answerx,
	#final_answerx2 {
		font-size: 36px !important;
	}

	#questionx,
	#final_questionx,
	#final_questionx2,
	#final_category,
	#final_category2 {
		font-size: 28px !important;
	}

	#timerx #timer,
	#ftimerx #ftimer,
	#ftimerx2 #ftimer2 {
		font-size: 40px;
	}
}

#prompt.play-zoom-in {
	position: relative;
	z-index: 2;
	animation: playZoomIn 220ms ease-out both;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
	transform-origin: center center;
	will-change: transform, opacity;
}

body.play-question-open:before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.46);
	animation: playBackdropIn 200ms ease-out both;
}

#prompt.play-zoom-in #answerx,
#prompt.play-zoom-in #qa_option,
#prompt.play-zoom-in #score2,
#prompt.play-zoom-in #timerx {
	animation: playContentIn 220ms ease-out both;
}

@keyframes playZoomIn {
	0% {
		opacity: 0;
		transform: scale(0.96);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes playBackdropIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes playContentIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	#prompt.play-zoom-in,
	body.play-question-open:before,
	#prompt.play-zoom-in #answerx,
	#prompt.play-zoom-in #qa_option,
	#prompt.play-zoom-in #score2,
	#prompt.play-zoom-in #timerx {
		animation: none;
	}
}

@media (max-width: 767px) {
	#headline {
		font-size: 18px !important;
	}

	div#answer a,
	div#final_answer a,
	div#double_jeopardy a,
	div#jeopardy_round a {
		font-size: 26px !important;
	}

	#answerx,
	#final_answerx,
	#final_answerx2 {
		font-size: 24px !important;
	}

	#questionx,
	#final_questionx,
	#final_questionx2,
	#final_category,
	#final_category2 {
		font-size: 21px !important;
	}

	.play-setup__header h1 {
		font-size: 31px !important;
	}
}

/* ------------------------------------------------------------------
   Board, prompt and scoreboard refresh.
   bootstrap.css and style.css are preloaded after this file, so rules
   that collide with them need !important or a heavier selector.
   ------------------------------------------------------------------ */

#pad {
	padding: 10px !important;
	border-radius: 14px;
}

#pad table {
	border-collapse: separate !important;
	border-spacing: 6px;
}

#pad .board {
	border: 0 !important;
	padding: 0;
	vertical-align: middle;
}

/* Zero the value cell's line-box and padding. Firefox counts a table cell's
   own inline line-height toward the row height (Chrome doesn't), which made
   the blue boxes render taller/uneven in Firefox. The tile height itself is
   driven by the game-on flex fill below, not pinned here, so the board still
   grows to fill the screen. */
#pad td.board {
	padding: 0 !important;
	line-height: 0 !important;
}

#headline {
	height: auto !important;
	background: transparent !important;
}

#pad #headline th.board {
	height: 72px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #18181b !important;
	color: #fafafa !important;
	/* Bumped from 15px: on a filled projector board the category is the label a
	   whole room reads, so it needs to carry. Long names still wrap cleanly in
	   the tall header cell. */
	font-size: 19px !important;
	font-weight: 800;
	line-height: 1.2 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
}

#pad div#answer a,
#pad div#final_answer a,
#pad div#double_jeopardy a,
#pad div#jeopardy_round a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 8px;
	box-sizing: border-box !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background: #0f3aa8 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	line-height: 1.1 !important;
	text-shadow: none !important;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#pad div#answer a.hide,
#pad div#final_answer a.hide,
#pad div#double_jeopardy a.hide,
#pad div#jeopardy_round a.hide {
	display: none;
}

#pad div#answer a span,
#pad div#final_answer a span,
#pad div#double_jeopardy a span,
#pad div#jeopardy_round a span {
	display: block;
	padding: 0;
}

#pad div#answer a:hover,
#pad div#final_answer a:hover,
#pad div#double_jeopardy a:hover,
#pad div#jeopardy_round a:hover {
	background: #1d4ed8 !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(15, 58, 168, 0.45);
}

#pad div#answer a:active,
#pad div#final_answer a:active,
#pad div#double_jeopardy a:active,
#pad div#jeopardy_round a:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Tiles already played: removelink() adds .tile-used. */
#pad div#answer a.tile-used,
#pad div#final_answer a.tile-used,
#pad div#answer a.tile-used:hover,
#pad div#final_answer a.tile-used:hover {
	border-color: rgba(255, 255, 255, 0.06);
	background: #131c3f !important;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.22) !important;
	cursor: default;
	transform: none;
}

/* Round switchers read as banners rather than another value tile. */
#pad #double_game .board,
#pad #standart_pad .board,
#pad #final_board .board,
#pad #final_double_board .board {
	padding-top: 4px;
}

#pad div#double_jeopardy a,
#pad div#jeopardy_round a {
	background: #18181b !important;
	border-color: rgba(255, 255, 255, 0.16);
	font-size: 17px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#pad div#double_jeopardy a:hover,
#pad div#jeopardy_round a:hover {
	background: #27272a !important;
	box-shadow: 0 10px 22px rgba(9, 9, 11, 0.4);
}

#pad div#final_answer a {
	font-size: 18px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Question / final panels. jQuery fadeIn() writes an inline display,
   so these stay block-flow instead of flex. */
#prompt,
#final_prompt,
#final_prompt2 {
	max-width: 1120px;
	/* Was a fixed height, which clipped long questions and left dead space on
	   short ones. get_final_answer() also sets an inline height. */
	height: auto !important;
	/* Fill the screen the way the board does. The scoreboard floats while a
	   question is open, so the only thing to reserve below is the ad band —
	   hence the small reserve. Short screens fall back to 440px. */
	min-height: max(440px, calc(100vh - 170px));
	padding: 0;
	box-sizing: border-box;
	border-radius: 14px;
}

/* Members and offline builds have no ad band, so the panel can go nearly
   edge to edge. */
body.game-on:not(.has-ads) #prompt,
body.game-on:not(.has-ads) #final_prompt,
body.game-on:not(.has-ads) #final_prompt2 {
	min-height: max(440px, calc(100vh - 40px));
}

/* jQuery's fadeIn() writes display:block inline onto the panel, so the panel
   itself cannot be the flex container — its contents are centred here instead. */
.prompt-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: inherit;
	padding: 32px 24px;
	box-sizing: border-box;
}

#prompt br,
#final_prompt br,
#final_prompt2 br {
	display: none;
}

#timerx,
#ftimerx,
#ftimerx2 {
	margin-bottom: 4px;
}

/* style.css sets 48pt green Arial on these with a single-id selector, so these
   need two ids to win. Not !important: printDuration() sets color:red inline
   on the last seconds and that must still take effect. */
#timerx #timer,
#ftimerx #ftimer,
#ftimerx2 #ftimer2 {
	display: inline-block;
	min-width: 92px;
	margin-top: 0;
	padding: 6px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: inherit;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

#answerx,
#final_answerx,
#final_answerx2 {
	max-width: 900px;
	padding-top: 12px !important;
	margin-top: 12px !important;
	font-weight: 700;
}

#questionx,
#final_questionx,
#final_questionx2 {
	max-width: 900px;
	margin: 20px auto 0 !important;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	/* Soft gold reads clearly on the blue panel and sets the correct response
	   apart from the white clue above it (the old light blue washed out). */
	color: #fde68a !important;
}

#final_category,
#final_category2 {
	color: #e0e7ff !important;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#prompt #qa_option,
#final_prompt #final_link,
#final_prompt #go_to_question,
#final_prompt2 #final_link2,
#final_prompt2 #go_to_question2 {
	margin-top: 18px;
}

#prompt #qa_option a,
#final_prompt #final_link a,
#final_prompt #go_to_question a,
#final_prompt2 #final_link2 a,
#final_prompt2 #go_to_question2 a {
	display: inline-block;
	margin: 4px;
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #fff;
	font-size: 16px !important;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

#prompt #qa_option a:hover,
#final_prompt #final_link a:hover,
#final_prompt #go_to_question a:hover,
#final_prompt2 #final_link2 a:hover,
#final_prompt2 #go_to_question2 a:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	text-decoration: none;
}

/* ---- Playing state -------------------------------------------------------
   The body gradient (dark to 330px, then white) is built for the setup card:
   a white card on a dark band. Once load_game() hides that card the band and
   the white below it are just a seam and a slab of dead space under the board.
   While playing, the whole page goes dark so leftover space reads as part of
   the game instead of an empty margin. */
body.game-on {
	background: #09090b !important;
	/* No side padding while playing: it lets the ad band and board reach the
	   screen edges via width:100% instead of 100vw. 100vw counts the vertical
	   scrollbar's width too, which overflowed horizontally and showed a thin
	   scrollbar line along the bottom. */
	padding: 0 !important;
}

/* Fill exactly one screen: the board grows to fill the height above the ad
   band (which stays pinned at the very bottom in normal flow), and the
   scoreboard floats over the board rather than taking a row. Nothing is left
   dangling below the ad, so there is no leftover strip. */
body.game-on .container-narrow {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: 0;
	box-sizing: border-box;
}

body.game-on hr {
	display: none;
}

body.game-on .footer {
	padding-top: 12px;
	color: #71717a;
}

body.game-on .footer a {
	color: #d4d4d8;
}

/* The mute icon is drawn in solid black, which disappears on the dark page. */
body.game-on .speaker span {
	background: #d4d4d8;
}

body.game-on .speaker span:after {
	border-color: transparent #d4d4d8 transparent transparent;
}

body.game-on .speaker span:before {
	border-color: #d4d4d8;
}

/* The ad sits in its own band at the foot of the page, edge to edge, clearly a
   separate layer from the game above it. It stays in normal flow rather than
   being pinned over the page: nothing covers it, and it keeps behaving exactly
   as it does today for ad serving. Only .has-ads gets the band — for members
   that div holds nothing and an empty strip would just look broken. */
body.game-on.has-ads #ads {
	width: 100%;
	box-sizing: border-box;
	margin-top: auto; /* pins the band to the very bottom of the flow */
	padding: 16px 0;
	background: #111114;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.game-on.has-ads #ads br {
	display: none;
}

/* ---- Board fills the screen ----------------------------------------------
   The board grows to fill the height left over after the scoreboard, the ad
   band, and any round banners (Double Jeopardy Round!, Final Jeopardy!). Done
   with flexbox so it adapts to however many banners a game has, instead of a
   fixed height that pushed the Final Jeopardy banner off screen.

   #pad is a flex column; the main board (#standart_game) grows while the
   banners keep their natural height and stay visible below it. Setting the
   height on the answer div (not the table cell) keeps all five rows equal —
   height:100% on the cell itself makes the first row swallow the slack. */
body.game-on #pad {
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* jQuery's fadeIn()/show() write an inline `display: block` that beats a plain
   `display: flex`, which left the board un-stretched in the real app. Force
   flex only while the board is actually shown — when hidden for a question,
   jQuery writes `display: none`, which this selector excludes so the board
   stays hidden. */
body.game-on #pad:not([style*="display: none"]) {
	display: flex !important;
}

body.game-on #standart_game {
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

body.game-on #standart_game:not([style*="display: none"]) {
	display: flex !important;
}

body.game-on #standart_game > table {
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}

/* Round banners keep their own height and stay in view under the board. */
body.game-on #pad > table,
body.game-on #double_game,
body.game-on #standart_pad,
body.game-on #final_board {
	flex: 0 0 auto;
}

/* Size the tiles by viewport height instead of stretching table rows: HTML
   tables distribute a table's surplus height among rows differently in Firefox
   vs Chrome (the source of the uneven boxes), and often don't distribute it at
   all (leaving a black gap below the board). A vh-based height is identical in
   every browser, so all five rows are equal AND the board grows with the
   screen. The offset reserves room for the header, scoreboard and ad band; the
   min/max keep it sane on very short or very tall screens. */
body.game-on #standart_game div#answer,
body.game-on #standart_game div#answer a {
	height: calc((100vh - 440px) / 5);
	min-height: 72px;
	max-height: 168px;
}

/* Center the board in whatever height is left so any rounding slack is split
   evenly top and bottom (reads as an intentionally centered board) rather than
   pooling into one black strip. */
body.game-on #standart_game:not([style*="display: none"]) {
	justify-content: center;
}

/* The double round board is slid in with an inline display:block by jQuery, so
   it can't join the flex column. Give its tiles a sensible floor instead of the
   collapsed content height a stray height:100% would leave them at. */
body.game-on #double div#answer a {
	min-height: 88px;
}

/* Mute toggle and footer leave the flow so they cost the board no height. */
body.game-on #mutebtn.speaker {
	position: fixed;
	top: 12px;
	right: 14px;
	z-index: 6;
	margin: 0;
}

/* Back to the setup screen (team count, timer, …). Only shown once a game is
   running; on the setup screen itself it is hidden. */
#menubtn {
	display: none;
}

body.game-on #menubtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: fixed;
	top: 12px;
	left: 14px;
	z-index: 6;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #e4e4e7;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

body.game-on #menubtn:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	text-decoration: none;
}

body.game-on .footer {
	display: none;
}

/* Scoreboard: one card per team, carrying that team's +/- controls.
   score_counter() builds it once per game; the cards must survive every
   question, so nothing here may depend on being re-rendered. */
#score {
	margin-top: 18px;
	overflow-x: auto;
}

/* On the board, the scoreboard sits in normal flow just under the board: the
   board flex-grows to leave exactly its row plus the banners plus the ad. It is
   NOT floated here, because a floating scoreboard covered the Final Jeopardy
   banner. */
body.game-on #score {
	margin: 12px 0 14px;
	flex: 0 0 auto;
}

/* While a question is open the board is hidden, so the scoreboard floats at the
   bottom over the question backdrop — the host can score without it taking a
   row from the panel. It sits above the ad band; with no ad it drops lower. */
body.game-on.play-question-open #score {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 132px;
	z-index: 4;
	margin: 0;
	padding: 0 8px;
	pointer-events: none;
}

body.game-on.play-question-open:not(.has-ads) #score {
	bottom: 16px;
}

/* Only the cards block clicks; the gaps pass through (matters while floating). */
body.game-on.play-question-open #score .scoreboard {
	pointer-events: none;
}

body.game-on.play-question-open #score .score-card {
	pointer-events: auto;
}

.scoreboard {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	padding: 2px;
}

.score-card {
	min-width: 104px;
	padding: 10px 14px 12px;
	border: 1px solid #e4e4e7;
	border-radius: 12px;
	background: #fafafa;
	text-align: center;
}

.score-card__name {
	color: #52525b;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

.score-card__value {
	margin-top: 2px;
	color: #09090b;
	font-size: 24px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Only meaningful while a question is open: without one there is no value to
   add or subtract, so they stay out of the way. */
.score-card__actions {
	display: none;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

/* No reserved space when hidden: the board is swapped out for the question
   panel anyway, so the cards resizing costs nothing. */
#score.score-live .score-card__actions {
	display: flex;
}

.score-btn {
	width: 38px;
	height: 32px;
	padding: 0;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	background: #fff;
	color: #52525b;
	font-family: inherit;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.score-btn--right:hover {
	border-color: #15803d;
	background: #15803d;
	color: #fff;
}

.score-btn--wrong:hover {
	border-color: #b91c1c;
	background: #b91c1c;
	color: #fff;
}

.score-btn:active {
	transform: translateY(1px);
}

/* Legacy per-question score holders. The controls moved to the team cards, so
   these are never filled any more; keep them from reserving blank space. */
#score2:empty,
#score3:empty,
#score4:empty {
	display: none;
	margin: 0;
}


/* Final wager form. */
#final_wager,
#final_wager2 {
	max-width: 600px;
	width: auto !important;
	padding: 20px !important;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
}

.final_wager_table {
	width: 100%;
	max-width: 500px;
	margin-bottom: 0;
	padding: 0; /* the earlier block sets 50px, which padded the card out */
	border: 0;
	border-collapse: separate !important;
	border-spacing: 0 6px;
}

.final_wager_table th {
	padding-bottom: 6px;
	color: #a1a1aa;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.final_wager_table td {
	padding: 4px 6px;
}

.final_wager_table input[type="text"] {
	height: 34px;
	padding: 4px 10px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.final_wager_table .button,
.final_wager_table2 .button {
	padding: 9px 18px !important;
	border-radius: 999px !important;
	background-color: #fff !important;
	color: #09090b !important;
	font-weight: 700;
	cursor: pointer;
}

.final_wager_table .button:hover,
.final_wager_table2 .button:hover {
	background-color: #e4e4e7 !important;
}

/* Mute toggle sits centred under the board. */
#mutebtn.speaker {
	display: block;
	margin: 16px auto 0;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

#mutebtn.speaker:hover {
	opacity: 1;
}

/* Setup card: keep one primary action, demote the rest to ghost links. */
.play-actions a:not(.play-actions__secondary) {
	padding: 11px 14px;
	border-radius: 6px;
	color: #52525b;
	font-size: 15px;
	line-height: 20px;
	transition: background 0.15s ease, color 0.15s ease;
}

.play-actions a:not(.play-actions__secondary):hover {
	background: #f4f4f5;
	color: #09090b;
	text-decoration: none;
}

/* Five columns get tight well before the phone breakpoint. */
@media (max-width: 991px) {
	#pad #headline th.board {
		font-size: 16px !important;
		letter-spacing: 0.03em;
	}

	#pad div#answer a {
		font-size: 22px !important;
	}
}

@media (max-width: 767px) {
	#pad {
		padding: 6px !important;
	}

	#pad table {
		border-spacing: 4px;
	}

	#pad .board {
		overflow-wrap: break-word;
	}

	#pad #headline th.board {
		height: 54px;
		padding: 6px 4px;
		border-radius: 8px;
		font-size: 10px !important;
		letter-spacing: 0.02em;
	}

	#pad div#answer a {
		height: 72px;
		padding: 4px;
		border-radius: 8px;
		font-size: 17px !important;
	}

	#pad div#final_answer a,
	#pad div#double_jeopardy a,
	#pad div#jeopardy_round a {
		height: auto;
		min-height: 46px;
		border-radius: 8px;
		font-size: 13px !important;
	}

	.prompt-inner {
		padding: 20px 12px;
	}

	.scoreboard {
		gap: 6px;
	}

	.score-card {
		min-width: 82px;
		padding: 8px 10px 10px;
	}

	.score-card__name {
		max-width: 96px;
		font-size: 11px;
	}

	.score-card__value {
		font-size: 19px;
	}

	.score-btn {
		width: 34px;
		height: 30px;
	}
}