/* Theme variables */
:root {
	--pv-bg: #ffffff;
	--pv-text: #111827;
	--pv-heading-text: #1f2937;
	--pv-muted-text: #374151;
	--pv-card-bg: #ffffff;
	--pv-card-bg-hover: #f9fafb;
	--pv-border: #e5e7eb;
	--pv-panel-bg: #f9fafb;
	--pv-input-bg: #ffffff;
	--pv-accent: #3b82f6;
	--pv-accent-strong: #2563eb;
	--pv-accent-ring: rgba(59, 130, 246, 0.25);
	--pv-accent-focus-ring: rgba(59, 130, 246, 0.5);
	--pv-success: #10b981;
	--pv-success-bg: #d1fae5;
	--pv-success-ring: rgba(16, 185, 129, 0.35);
	--pv-danger: #ef4444;
	--pv-danger-bg: #fee2e2;
	--pv-danger-ring: rgba(239, 68, 68, 0.35);
	--pv-warning: #f59e0b;
	--pv-warning-ring: rgba(245, 158, 11, 0.35);
	--pv-hint: #34d399;
	--pv-toast-bg: #f9fafb;
	--pv-toast-text: #111827;
	--pv-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* System dark mode (when no explicit data-theme is set) */
@media (prefers-color-scheme: dark) {
	:root {
		--pv-bg: #0b1220;
		--pv-text: #e5e7eb;
		--pv-heading-text: #f3f4f6;
		--pv-muted-text: #d1d5db;
		--pv-card-bg: #0f172a;
		--pv-card-bg-hover: #111827;
		--pv-border: #1f2937;
		--pv-panel-bg: #0f172a;
		--pv-input-bg: #0b1220;
		--pv-accent: #60a5fa;
		--pv-accent-strong: #3b82f6;
		--pv-accent-ring: rgba(96, 165, 250, 0.3);
		--pv-accent-focus-ring: rgba(96, 165, 250, 0.45);
		--pv-success: #10b981;
		--pv-success-bg: #064e3b;
		--pv-success-ring: rgba(16, 185, 129, 0.5);
		--pv-danger: #ef4444;
		--pv-danger-bg: #3f1d1d;
		--pv-danger-ring: rgba(239, 68, 68, 0.5);
		--pv-warning: #f59e0b;
		--pv-warning-ring: rgba(245, 158, 11, 0.5);
		--pv-hint: #34d399;
		--pv-toast-bg: #0f172a;
		--pv-toast-text: #e5e7eb;
		--pv-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.55);
	}
}

/* Light mode */
:root[data-theme="light"] {
	--pv-bg: #ffffff;
	--pv-text: #111827;
	--pv-heading-text: #1f2937;
	--pv-muted-text: #374151;
	--pv-card-bg: #ffffff;
	--pv-card-bg-hover: #f9fafb;
	--pv-border: #e5e7eb;
	--pv-panel-bg: #f9fafb;
	--pv-input-bg: #ffffff;
	--pv-accent: #3b82f6;
	--pv-accent-strong: #2563eb;
	--pv-accent-ring: rgba(59, 130, 246, 0.25);
	--pv-accent-focus-ring: rgba(59, 130, 246, 0.5);
	--pv-success: #10b981;
	--pv-success-bg: #d1fae5;
	--pv-success-ring: rgba(16, 185, 129, 0.35);
	--pv-danger: #ef4444;
	--pv-danger-bg: #fee2e2;
	--pv-danger-ring: rgba(239, 68, 68, 0.35);
	--pv-warning: #f59e0b;
	--pv-warning-ring: rgba(245, 158, 11, 0.35);
	--pv-hint: #34d399;
	--pv-toast-bg: #f9fafb;
	--pv-toast-text: #111827;
	--pv-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] {
	--pv-bg: #0b1220;
	--pv-text: #e5e7eb;
	--pv-heading-text: #f3f4f6;
	--pv-muted-text: #d1d5db;
	--pv-card-bg: #0f172a;
	--pv-card-bg-hover: #111827;
	--pv-border: #1f2937;
	--pv-panel-bg: #0f172a;
	--pv-input-bg: #0b1220;
	--pv-accent: #60a5fa;
	--pv-accent-strong: #3b82f6;
	--pv-accent-ring: rgba(96, 165, 250, 0.3);
	--pv-accent-focus-ring: rgba(96, 165, 250, 0.45);
	--pv-success: #10b981;
	--pv-success-bg: #064e3b;
	--pv-success-ring: rgba(16, 185, 129, 0.5);
	--pv-danger: #ef4444;
	--pv-danger-bg: #3f1d1d;
	--pv-danger-ring: rgba(239, 68, 68, 0.5);
	--pv-warning: #f59e0b;
	--pv-warning-ring: rgba(245, 158, 11, 0.5);
	--pv-hint: #34d399;
	--pv-toast-bg: #0f172a;
	--pv-toast-text: #e5e7eb;
	--pv-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.55);
}

/* Question cards */
.question-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.question-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 10px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	text-align: center;
}

.question-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.question-card.selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.question-icon {
	font-size: 24px;
	line-height: 1;
}

.question-icon-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 6px;
}

.question-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pv-text);
}

@media (max-width: 480px) {
	.question-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 360px) {
	.question-grid {
		grid-template-columns: 1fr;
	}
}

/* Unified Play SDK CSS ( Templates ) */
.play-container-main {
	padding: 2rem;
	/* width: 100%; */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: var(--pv-text);
	background-color: var(--pv-bg);
}

/* BrandBreaker styles */
.bb-root {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}

.bb-game {
	position: relative;
	width: min(90vw, 800px);
	height: min(90vh, 600px);
	background: var(--pv-surface, #fff);
	border: 1px solid var(--pv-border, #dcdcdc);
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.bb-canvas {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--pv-muted-bg, #e9ecef);
	cursor: pointer;
}

.bb-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.86);
	color: var(--pv-foreground, #222);
	text-align: center;
	z-index: 10;
	padding: 12px;
}

:root[data-theme="1751555993981"] .bb-overlay {
	background: rgba(20, 20, 24, 0.86);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .bb-overlay {
		background: rgba(20, 20, 24, 0.86);
	}
}

.bb-overlay h1 {
	font-size: 2rem;
	margin: 0 0 4px;
}

.bb-overlay p {
	opacity: 0.8;
	margin: 0;
}

.bb-settings {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bb-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.bb-row label {
	font-size: 0.95rem;
}

.bb-row select {
	font: inherit;
	background: var(--pv-input-bg, #fff);
	color: var(--pv-foreground, #222);
	border: 1px solid var(--pv-border, #cfd4d9);
	border-radius: 6px;
	padding: 8px 10px;
	min-width: 180px;
}

.bb-stats {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 14px;
	font-weight: 700;
	color: var(--pv-foreground, #333);
	pointer-events: none;
	z-index: 5;
}

.bb-controls {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.bb-hidden {
	display: none !important;
}

.main-title {
	font-size: 1.875rem;
	font-weight: 900;
	color: white;
	margin-bottom: 1.5rem;
	text-align: center;
}

/* Polished cards and actions (Studio and Fallback) */
.pv-card {
	width: 100%;
	max-width: 720px;
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	color: var(--pv-text);
}

.pv-card-error {
	border-left: 5px solid #ef4444;
}

.pv-card-body {
	padding: 1.25rem 1.25rem 0.5rem;
}

.pv-card-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0.75rem 1rem 1.25rem;
}

.pv-link {
	color: var(--pv-accent);
	text-decoration: none;
	font-weight: 600;
}

.pv-link:hover {
	text-decoration: underline;
}

.pv-actions {
	margin: 1rem 0 0.75rem;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.pv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0.6rem 1rem;
	border-radius: 10px;
	font-weight: 800;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.pv-btn-primary {
	background: linear-gradient(90deg, var(--pv-accent), #9333ea);
	color: #fff;
}

.pv-btn-primary:hover {
	filter: brightness(1.05);
}

.pv-btn-secondary {
	background: var(--pv-panel-bg);
	color: var(--pv-text);
	border-color: var(--pv-border);
}

.pv-btn-secondary:hover {
	background: var(--pv-card-bg-hover);
}

.pv-divider {
	height: 1px;
	width: 100%;
	background: var(--pv-border);
	margin: 1rem 0;
}

.pv-template-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 560px) {
	.pv-template-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.pv-template-grid {
		grid-template-columns: 1fr;
	}
}

.pv-template-card {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	padding: 0.75rem;
	text-align: center;
	color: var(--pv-text);
}

.pv-template-icon {
	font-size: 1.8rem;
}

.pv-template-title {
	font-weight: 800;
	margin-top: 0.25rem;
}

.pv-template-desc {
	color: var(--pv-muted-text);
	font-size: 0.93rem;
}

.pv-dot {
	color: var(--pv-muted-text);
}

.pv-hint {
	color: var(--pv-muted-text);
	margin-top: 0.25rem;
	font-size: 0.95rem;
	text-align: center;
}

.pv-error-icon {
	font-size: 2rem;
	line-height: 1;
	text-align: center;
	margin-bottom: .25rem;
}

.wheel-container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

.wheel-wrapper {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
}

#wheelCanvas {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
	margin: 0;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
}

.winner-value-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 0.5rem;
	line-height: 1.4;
}

.pointer {
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 40px solid white;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.pointer::after {
	content: '';
	position: absolute;
	top: -15px;
	left: -15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

/* Shared Toast */
.message-box {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 9999;
	background-color: var(--pv-toast-bg);
	color: var(--pv-toast-text);
	padding: 0.875rem 1rem;
	border-radius: 0.5rem;
	text-align: left;
	font-weight: 600;
	margin: 0;
	box-shadow: var(--pv-shadow);
	border-left: 4px solid var(--pv-accent);
	max-width: 90vw;
	width: auto;
	animation: fr-toast-in 0.25s ease-out, fr-toast-out 0.25s ease-in 2.75s forwards;
}

.message-box.is-info {
	border-left-color: #3b82f6;
}

.message-box.is-success {
	border-left-color: #10b981;
	background-color: #ecfdf5;
}

.message-box.is-error {
	border-left-color: #ef4444;
	background-color: #fef2f2;
}

@keyframes fr-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fr-toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-8px);
		visibility: hidden;
	}
}

.title {
	font-size: 2.25rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 0.5rem;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, #3b82f6, #9333ea);
}

.subtitle {
	text-align: center;
	color: var(--pv-muted-text);
	margin-bottom: 1.5rem;
}

.config-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background-color: var(--pv-panel-bg);
	border-radius: 0.5rem;
}

@media (min-width: 640px) {
	.config-panel {
		flex-direction: row;
		margin-left: -1rem;
		margin-right: -1rem;
		justify-content: space-around;
		align-items: center;
	}

	.config-panel>div {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

.config-option {
	flex: 1 1 0%;
	width: 100%;
	margin-bottom: 1rem;
}

.config-choice-option {
	flex: 1 1 0%;
	width: 60%;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.config-option {
		width: auto;
		margin-bottom: 0;
	}

	.config-choice-option {
		width: auto;
		margin-bottom: 0;
	}
}

.label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--pv-muted-text);
}

.select-input {
	margin-top: 0.25rem;
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 0.5rem 0.75rem;
	box-sizing: border-box;
}

.select-input:focus {
	border-color: var(--pv-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--pv-accent-focus-ring);
}

/* Text input matches select styling for consistent emotionalmeter look */
.text-input {
	margin-top: 0.25rem;
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 0.5rem 0.75rem;
	box-sizing: border-box;
}

.text-input:focus {
	border-color: var(--pv-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--pv-accent-focus-ring);
}

.quiz-display {
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.quiz-info {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--pv-heading-text);
}

.timer-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pv-heading-text);
}

.timer-icon {
	height: 1.5rem;
	width: 1.5rem;
	color: #ef4444;
}

.question-text {
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1.5rem;
}

.question-image {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin: auto;
	display: block;
}

.options-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.options-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.option-button {
	width: 100%;
	padding: 1rem;
	background-color: var(--pv-card-bg);
	border: 2px solid var(--pv-border);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: left;
	color: var(--pv-text);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s;
	cursor: pointer;
}

.option-button:hover {
	transform: translateY(-2px);
	background-color: var(--pv-card-bg-hover);
}

.option-button.correct {
	border-color: var(--pv-success);
	box-shadow: 0 0 10px var(--pv-success);
	background-color: var(--pv-success-bg);
}

.option-button.incorrect {
	border-color: var(--pv-danger);
	box-shadow: 0 0 10px var(--pv-danger);
	background-color: var(--pv-danger-bg);
}

.option-button.demo-selected {
	border-color: var(--pv-warning);
	box-shadow: 0 0 10px var(--pv-warning);
	animation: pulse-demo 1.5s infinite;
}

.option-button.help-hint {
	border-color: var(--pv-hint);
	box-shadow: 0 0 10px var(--pv-hint);
	animation: pulse-hint 1.5s infinite;
}

@keyframes pulse-demo {

	0%,
	100% {
		box-shadow: 0 0 10px var(--pv-warning);
	}

	50% {
		box-shadow: 0 0 20px var(--pv-warning);
	}
}

@keyframes pulse-hint {

	0%,
	100% {
		box-shadow: 0 0 10px var(--pv-hint);
	}

	50% {
		box-shadow: 0 0 20px var(--pv-hint);
	}
}

.option-image {
	width: 6rem;
	height: 4rem;
	object-fit: contain;
	margin-bottom: 0.5rem;
	border-radius: 0.375rem;
}

.option-text {
	font-weight: 500;
	text-align: center;
}

.next-button {
	margin-top: 1.5rem;
	width: 100%;
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--pv-accent);
	transition: background-color 0.2s;
	cursor: pointer;
	border: none;
}

.next-button:hover {
	background-color: var(--pv-accent-strong);
}

.next-button:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--pv-accent-focus-ring), 0 0 0 4px var(--pv-accent-focus-ring);
}

.results-container {
	text-align: center;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-heading {
	font-size: 1.875rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.results-text {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.final-score {
	font-weight: 800;
	color: var(--pv-accent);
}

.final-total-questions {
	font-weight: 800;
	color: var(--pv-heading-text);
}

.restart-button {
	width: 50%;
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	font-weight: 700;
	color: #fff;
	background-color: #9333ea;
	transition: background-color 0.2s;
	cursor: pointer;
	border: none;
}

.restart-button:hover {
	background-color: #7e22ce;
}

.restart-button:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.5), 0 0 0 4px rgba(147, 51, 234, 0.5);
}

.review-container {
	margin-top: 2rem;
	text-align: left;
}

.review-item {
	background-color: var(--pv-panel-bg);
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.review-item h4 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: var(--pv-heading-text);
}

.review-item p {
	font-size: 1rem;
	color: var(--pv-muted-text);
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.review-answer {
	font-weight: 600;
	color: var(--pv-muted-text);
}

.correct-text {
	color: #10b981;
}

.incorrect-text {
	color: #ef4444;
}

.review-image {
	max-width: 150px;
	height: auto;
	border-radius: 0.5rem;
	margin-top: 0.5rem;
}

.review-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
}

.review-navigation .review-question-number {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--pv-muted-text);
}

.review-navigation-button {
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	font-weight: 700;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.review-navigation-button:disabled {
	background-color: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
}

.review-prev-button {
	background-color: #4b5563;
}

.review-prev-button:hover:not(:disabled) {
	background-color: #374151;
}

.review-next-button {
	background-color: var(--pv-accent);
}

.review-next-button:hover:not(:disabled) {
	background-color: var(--pv-accent-strong);
}

#fr-logo,
#pv-logo {
	display: none;
	max-width: 80px;
	height: auto;
	margin: 0 auto 0.75rem;
	transition: max-width 0.25s ease, opacity 0.25s ease;
}

#fr-logo.fr-visible,
#pv-logo.fr-visible {
	display: block;
}

#fr-logo.fr-logo-small,
#pv-logo.fr-logo-small {
	max-width: 140px;
}

#fr-logo.fr-logo-medium,
#pv-logo.fr-logo-medium {
	max-width: 200px;
}

#fr-logo.fr-logo-large,
#pv-logo.fr-logo-large {
	max-width: 260px;
}

#fr-logo.fr-logo-largest,
#pv-logo.fr-logo-largest {
	max-width: 400px;
}

.fr-title {
	margin: 0;
}

.is-hidden {
	display: none !important;
}

/* EmotionTracker design */
.et-steps {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.et-card {
	background-color: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.et-actions {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-top: 16px;
}

.et-actions {
	align-items: center;
}

.et-actions .next-button {
	width: auto !important;
	min-width: 140px;
	margin-top: 0;
}

.et-actions #et-prev {
	margin-right: auto;
}

.et-actions>div {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

@media (max-width: 420px) {
	.et-actions .next-button {
		min-width: 120px;
	}
}

.et-progress {
	font-size: 0.875rem;
	color: var(--pv-muted-text);
	margin-bottom: 10px;
	text-align: right;
}

.et-progress .et-progresstext {
	display: block;
	text-align: right;
	margin-bottom: 6px;
}

.et-progressbar {
	width: 100%;
	height: 6px;
	background-color: var(--pv-border);
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.et-progressbar .bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #3b82f6, #9333ea);
	transition: width 0.3s ease;
	border-radius: inherit;
}

.et-card #et-step-content {
	margin-top: 6px;
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(60px, 1fr));
	gap: 12px;
	justify-items: center;
	align-items: center;
	margin-top: 8px;
}

.emoji-button {
	width: 100%;
	min-height: 72px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.emoji-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.emoji-button.selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.emoji-emoji {
	font-size: 28px;
}

.emoji-label {
	font-size: 12px;
	color: var(--pv-muted-text);
}

.chip-group {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 8px;
	flex-wrap: wrap;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--pv-border);
	border-radius: 9999px;
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.chip:hover {
	background: #f9fafb;
}

.chip.active {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.gender-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.gender-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 10px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.gender-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.gender-card.selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.gender-icon {
	font-size: 28px;
	line-height: 1;
}

.gender-icon-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 6px;
}

.gender-label {
	font-size: 0.9rem;
	color: var(--pv-muted-text);
	font-weight: 600;
}

.brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 10px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	text-align: center;
}

.brand-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.brand-card.selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.brand-icon {
	font-size: 26px;
	line-height: 1;
}

.brand-icon-img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 8px;
}

.brand-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pv-text);
}

.age-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.age-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	text-align: center;
}

.age-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.age-card.selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
}

.age-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pv-text);
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {

	.gender-grid,
	.age-grid,
	.brand-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 360px) {

	.gender-grid,
	.age-grid,
	.brand-grid {
		grid-template-columns: 1fr;
	}
}

.btn-secondary {
	background-color: #6b7280;
}

.btn-secondary:hover {
	background-color: #4b5563;
}

.btn-success {
	background-color: #10b981;
}

.btn-success:hover {
	background-color: #059669;
}

.textarea-input {
	margin-top: 0.25rem;
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 0.5rem 0.75rem;
	box-sizing: border-box;
	min-height: 120px;
	resize: vertical;
}

/* Form spacing helpers */
.form-group {
	margin-bottom: 12px;
	text-align: left;
}

.form-group .label {
	margin-bottom: 4px;
}

/* PuzzleTale grid */
.pt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.pt-tile {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	border: 2px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	font-size: 1.25rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pt-tile:hover {
	transform: translateY(-1px);
	background-color: var(--pv-card-bg-hover);
}

.pt-tile.empty {
	background: transparent;
	border-color: transparent;
	cursor: default;
	box-shadow: none;
}

/* Match3 styles */
#m3-main .m3-card {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	box-shadow: var(--pv-shadow);
}

#m3-main .m3-body {
	padding: 12px;
}

#m3-main .m3-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0;
}

#m3-main .m3-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px;
}

#m3-main .m3-layout {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

@media (max-width: 900px) {
	#m3-main .m3-layout {
		flex-direction: column;
	}
}

#m3-main .m3-panel {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 10px;
	padding: 10px;
}

#m3-main .m3-select {
	font: inherit;
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 8px 10px;
}

#m3-main .m3-btn {
	font: inherit;
	background: var(--pv-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 800;
	cursor: pointer;
}

#m3-main .m3-btn:hover {
	background: var(--pv-accent-strong);
}

/* Stackify styles */
#stfy-main .stfy-card {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	box-shadow: var(--pv-shadow);
}

#stfy-main .stfy-body {
	padding: 12px;
}

#stfy-main .stfy-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0;
}

#stfy-main .stfy-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px;
}

#stfy-main .stfy-panel {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 10px;
	padding: 10px;
}

#stfy-main .stfy-select {
	font: inherit;
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 8px 10px;
}

#stfy-main .stfy-btn {
	font: inherit;
	background: var(--pv-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 800;
	cursor: pointer;
}

#stfy-main .stfy-btn:hover {
	background: var(--pv-accent-strong);
}

/* CatchTheThief styles */
#ctt-main .ctt-card {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	box-shadow: var(--pv-shadow);
}

#ctt-main .ctt-body {
	padding: 12px;
}

#ctt-main .ctt-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0;
}

#ctt-main .ctt-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px;
}

#ctt-main .ctt-panel {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

#ctt-main .ctt-select {
	font: inherit;
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 8px 10px;
}

#ctt-main .ctt-btn {
	font: inherit;
	background: linear-gradient(145deg, #22c55e, #16a34a);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 800;
	cursor: pointer;
}

/* ByteSnake styles */
#bs-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px
}

#bs-main .bs-card {
	background: var(--pv-card-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	width: clamp(300px, 95vw, 1100px);
	box-shadow: var(--pv-shadow);
	overflow: hidden
}

#bs-main .bs-body {
	padding: 10px
}

#bs-main .bs-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0
}

#bs-main .bs-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px
}

#bs-main .bs-layout {
	display: flex;
	gap: 12px;
	align-items: flex-start
}

@media(max-width:900px) {
	#bs-main .bs-layout {
		flex-direction: column
	}
}

#bs-main .bs-left {
	flex: 1 1 0
}

#bs-main .bs-right {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

#bs-main .bs-panel {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 10px;
	padding: 10px
}

#bs-main .bs-container {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	max-height: 720px;
	border-radius: 8px;
	overflow: hidden;
	background: #0f172a0d
}

#bs-main canvas {
	width: 100%;
	height: 100%;
	display: block;
	background: #11182712
}

#bs-main .bs-stats {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	font-weight: 800;
	pointer-events: none
}

#bs-main .bs-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	gap: 10px;
	z-index: 5;
	text-align: center
}

@media(prefers-color-scheme:dark) {
	:root:not([data-theme]) #bs-main .bs-overlay {
		background: rgba(20, 20, 24, 0.86)
	}
}

#bs-main .bs-row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between
}

#bs-main .bs-select {
	font: inherit;
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 8px 10px;
	width: 100%
}

#bs-main .bs-btn {
	font: inherit;
	background: var(--pv-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 800;
	cursor: pointer
}

#bs-main .bs-btn:hover {
	background: var(--pv-accent-strong)
}

#bs-main .bs-controls {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10
}

#bs-main .pad {
	display: grid;
	grid-template-areas: ". up ." "left . right" ". down .";
	gap: 6px;
	width: 200px;
	margin: 0 auto
}

#bs-main .pad button {
	background: #3B82F6;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 10px;
	cursor: pointer;
	font-weight: 800
}

#bs-main .bs-next {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 8px;
	font-weight: 800
}

.bs-hidden {
	display: none !important
}

/* FlipCard styles */
#fc-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px
}

#fc-main .fc-card {
	background: var(--pv-card-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	width: clamp(300px, 92vw, 920px);
	box-shadow: var(--pv-shadow);
	overflow: hidden
}

#fc-main .fc-body {
	padding: 12px
}

#fc-main .fc-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0
}

#fc-main .fc-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px
}

#fc-main .fc-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-weight: 800
}

#fc-main .grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px
}

@media(max-width:760px) {
	#fc-main .grid {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media(max-width:480px) {
	#fc-main .grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

.tile {
	position: relative;
	aspect-ratio: 3/4;
	perspective: 1000px
}

.card3d {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform .35s
}

.card3d.flipped {
	transform: rotateY(180deg)
}

.face {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	border: 1px solid var(--pv-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.4rem;
	backface-visibility: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08)
}

.front {
	background: var(--pv-panel-bg)
}

.back {
	transform: rotateY(180deg);
	background: linear-gradient(135deg, #3b82f6, #9333ea);
	color: #fff
}

.fc-btn {
	font: inherit;
	background: var(--pv-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 8px 12px;
	font-weight: 800;
	cursor: pointer
}

.fc-btn:hover {
	background: var(--pv-accent-strong)
}

.fc-hidden {
	display: none !important
}

/* BrandBreaker SDK styles */
#bb-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

#bb-main .bb-card {
	background: var(--pv-card-bg, #fff);
	color: var(--pv-text, #333);
	border: 1px solid var(--pv-border, #e5e7eb);
	border-radius: 10px;
	width: clamp(300px, 90vw, 860px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

#bb-main .bb-card .bb-body {
	padding: 10px;
}

#bb-main .bb-title {
	font-size: 22px;
	font-weight: 800;
	margin: 4px 0;
}

#bb-main .bb-subtitle {
	font-size: 14px;
	opacity: .85;
	margin-bottom: 8px;
}

#bb-main .game-container {
	border: 1px solid #ccc;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	background: #ffffff;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4/3;
	max-height: 640px;
}

#bb-main canvas {
	display: block;
	background-color: #e9ecef;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

#bb-main .ui-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: center;
	flex-direction: column;
	gap: 12px;
	z-index: 10;
}

#bb-main .ui-overlay h1 {
	font-size: 2rem;
	font-weight: 800;
	color: #111827;
}

#bb-main .ui-overlay p {
	font-size: .95rem;
	color: #4b5563;
}

#bb-main .bb-btn {
	font: inherit;
	background: #3B82F6;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-weight: 800;
	cursor: pointer;
}

#bb-main .bb-btn:hover {
	background: #2563EB;
}

#bb-main .game-stats {
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	font-weight: 800;
	color: #374151;
	pointer-events: none;
	font-size: 0.9rem;
}

#bb-main .settings-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#bb-main .settings-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #374151;
	font-size: .95rem;
}

#bb-main .settings-row select {
	font: inherit;
	background: #fff;
	color: #111827;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 8px 10px;
	cursor: pointer;
}

#bb-main .settings-row select:focus {
	outline: 2px solid #93c5fd;
	outline-offset: 1px;
}

#bb-main .game-controls {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

#bb-main .game-controls button {
	background: #06B6D4;
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-weight: 800;
	font-size: .9rem;
}

#bb-main .game-controls button:hover {
	background: #0891B2;
}

#bb-main #bb-restart {
	background: #F59E0B;
	color: #111827;
}

#bb-main #bb-restart:hover {
	background: #D97706;
}

/* QuestBoard styles */
.qb-layout {
	display: flex;
	flex-direction: column;
	gap: 16px
}

@media (min-width: 1024px) {
	.qb-layout {
		flex-direction: row;
		align-items: flex-start
	}
}

.qb-panel {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06)
}

#qb-game-board {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 800px;
	box-shadow: var(--pv-shadow);
	border-radius: 12px;
	overflow: hidden;
	margin: 0 auto
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	padding: 4px;
	font-size: .8rem
}

@media (min-width:768px) {
	.tile {
		font-size: 1rem
	}
}

.tile-start {
	background: #4CAF50
}

.tile-question {
	background: #2196F3
}

.tile-end {
	background: #F44336
}

.tile.bg-gray-400 {
	background: #9CA3AF;
	color: #111827
}

.player-token {
	position: absolute;
	width: clamp(20px, 4vw, 30px);
	height: clamp(20px, 4vw, 30px);
	border-radius: 50%;
	border: 2px solid #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	color: #333;
	transition: transform 0.5s ease-in-out;
	z-index: 10;
	background: #fff
}

.qb-side {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.qb-row {
	display: flex;
	gap: 8px
}

.qb-select,
.qb-input {
	width: 100%;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border-radius: 8px;
	padding: 8px 10px
}

.qb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 10px;
	border: none;
	font-weight: 800;
	cursor: pointer;
	background: var(--pv-accent);
	color: #fff
}

.qb-btn:hover {
	background: var(--pv-accent-strong)
}

.choice-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: transform .2s;
	border-radius: 10px;
	padding: 10px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text)
}

.choice-btn:hover {
	transform: scale(1.03)
}

.choice-btn.correct {
	border: 3px solid var(--pv-success);
	box-shadow: 0 0 10px var(--pv-success)
}

.choice-btn.incorrect {
	border: 3px solid var(--pv-danger);
	box-shadow: 0 0 10px var(--pv-danger)
}

.qb-modal {
	position: fixed;
	inset: 0;
	display: none;
	background: rgba(0, 0, 0, 0.45);
	align-items: center;
	justify-content: center;
	padding: 12px;
	z-index: 1000
}

.qb-modal .qb-modal-content {
	background: var(--pv-card-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	box-shadow: var(--pv-shadow);
	padding: 18px;
	width: 100%;
	max-width: 640px
}

.qb-hidden {
	display: none
}

/* Common animations */
@keyframes wq-shake {

	10%,
	90% {
		transform: translateX(-2px);
	}

	20%,
	80% {
		transform: translateX(4px);
	}

	30%,
	50%,
	70% {
		transform: translateX(-6px);
	}

	40%,
	60% {
		transform: translateX(6px);
	}
}

.shake-anim {
	animation: wq-shake 0.4s ease both;
}

@keyframes wq-pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}

.pulse-anim {
	animation: wq-pulse 0.35s ease both;
}

@keyframes wq-fade-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.fadein-anim {
	animation: wq-fade-in 300ms ease both;
}

/* Brandopoly styles */
#bp-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

#bp-main .bp-card {
	background: var(--pv-card-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	width: clamp(300px, 95vw, 1200px);
	box-shadow: var(--pv-shadow);
	overflow: hidden;
}

#bp-main .bp-body { padding: 12px; }
#bp-main .bp-title { font-size: 22px; font-weight: 800; margin: 4px 0; }
#bp-main .bp-subtitle { font-size: 14px; opacity: .85; margin-bottom: 8px; }

#bp-main .bp-layout { display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 1024px) { #bp-main .bp-layout { flex-direction: column; } }

#bp-main .bp-left { flex: 1 1 0; }
#bp-main .bp-right { flex: 0 0 320px; display: flex; flex-direction: column; gap: 10px; }

#bp-main .bp-panel {
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 10px;
	padding: 10px;
}

#bp-board {
	position: relative;
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(11, 1fr);
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 700px;
	border: 5px solid #333;
	background: #cce0c4;
	border-radius: 8px;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	overflow: hidden;
}

.bp-space {
	position: relative;
	background: #f8f8f8;
	border: 1px solid var(--pv-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;
	padding: 4px;
	box-sizing: border-box;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.bp-space.corner { font-weight: 800; background: #d1e2f1; }
.bp-space .space-points {
	position: absolute;
	top: 5px; right: 5px;
	font-size: 0.7rem; font-weight: 800;
	color: #333; background: rgba(255,255,255,0.85);
	padding: 2px 4px; border-radius: 4px;
	pointer-events: none;
}

#bp-central {
	display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	padding: 10px; box-sizing: border-box; height: 100%;
}

#bp-timer {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	padding: 6px 12px;
	font-weight: 800; font-size: 1.8rem; color: var(--pv-heading-text);
	box-shadow: var(--pv-shadow);
}
.bp-timer-hidden { visibility: hidden; }

#bp-player-info { background: var(--pv-card-bg); border: 1px solid var(--pv-border); border-radius: 10px; padding: 10px; text-align: center; width: 100%; max-width: 260px; box-shadow: var(--pv-shadow); }
#bp-scores { background: var(--pv-card-bg); border: 1px solid var(--pv-border); border-radius: 10px; padding: 10px; width: 100%; max-width: 260px; box-shadow: var(--pv-shadow); display: flex; flex-direction: column; gap: 6px; }
#bp-scores-list li { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }

#bp-dice-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#bp-dice { display: block; border: 1px solid var(--pv-border); border-radius: 8px; box-shadow: inset 0 0 8px rgba(0,0,0,0.08); background: transparent; }
#bp-dice-text { font-weight: 800; color: var(--pv-heading-text); }

.bp-token {
	position: absolute; border-radius: 50%; border: 2px solid #fff; color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 10; background: #666;
	transition: transform 0.15s ease-in-out;
}

#bp-popup {
	position: fixed; background: var(--pv-card-bg); color: var(--pv-text); border: 1px solid var(--pv-border);
	border-radius: 8px; padding: 10px; box-shadow: var(--pv-shadow); z-index: 1000; display: none; opacity: 0;
	transition: opacity 0.2s ease-in-out; pointer-events: none; min-width: 160px;
}
#bp-popup .info-label { font-weight: 700; color: var(--pv-muted-text); }

.bp-select { font: inherit; background: var(--pv-input-bg); color: var(--pv-text); border: 1px solid var(--pv-border); border-radius: 8px; padding: 8px 10px; width: 100%; }
.bp-btn { font: inherit; background: var(--pv-accent); color: #fff; border: none; border-radius: 10px; padding: 10px 14px; font-weight: 800; cursor: pointer; }
.bp-btn:hover { background: var(--pv-accent-strong); }
.bp-btn.start { background: #16a34a; }
.bp-btn.start:hover { background: #15803d; }
.bp-btn.pause { background: #f59e0b; color: #111827; }
.bp-btn.pause:hover { background: #d97706; }
.bp-btn.resume { background: #a855f7; }
.bp-btn.resume:hover { background: #9333ea; }
.bp-btn.roll { background: #3b82f6; }
.bp-btn.roll:hover { background: #2563eb; }
.bp-btn.disabled, .bp-btn:disabled { opacity: .6; cursor: not-allowed; }

#bp-log { background: var(--pv-panel-bg); border: 1px solid var(--pv-border); border-radius: 10px; padding: 10px; box-shadow: inset 0 0 8px rgba(0,0,0,0.06); max-height: 200px; overflow-y: auto; }
#bp-log h3 { margin: 0 0 6px; font-size: 14px; color: var(--pv-muted-text); }

/* optional message box inside card */
#bp-msgbox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--pv-card-bg); color: var(--pv-text); border: 1px solid var(--pv-border); padding: 16px; border-radius: 12px; box-shadow: var(--pv-shadow); z-index: 1500; width: min(92vw, 420px); display: none; text-align: center; }
#bp-msgbox h3 { margin: 0 0 8px; }
#bp-msgbox button { margin-top: 10px; }