/* 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);
	--pv-overlay-bg: rgba(0, 0, 0, 0.6);
}

/* 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);
		--pv-overlay-bg: rgba(0, 0, 0, 0.6);
	}
}

/* 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);
	--pv-overlay-bg: rgba(0, 0, 0, 0.6);
}

: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);
	--pv-overlay-bg: rgba(0, 0, 0, 0.6);
}

/* 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: 1rem 0.75rem;
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	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);
	box-sizing: border-box;
	overflow-x: hidden;
	position: relative;
	transition: background-color 0.25s ease, color 0.25s ease;
}

@media (min-width: 768px) {
	.play-container-main {
		padding: 2rem 1.5rem;
	}
}

/* Loader overlay (migrated from JS) */
.pv-loader-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: none; /* shown by JS via display:flex */
	align-items: center;
	justify-content: center;
	z-index: 99998;
	backdrop-filter: saturate(120%) blur(1px);
}

.pv-loader-panel {
	background: rgba(20, 20, 20, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	border-radius: 14px;
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #fff;
	min-width: 220px;
}

.pv-loader-spin {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid #ffffff33;
	border-top-color: #60a5fa;
	animation: pvspin 0.9s linear infinite;
}

.pv-loader-text {
	font-size: 14px;
	color: #e5e7eb;
}

@keyframes pvspin {
	to { transform: rotate(360deg); }
}

/* 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);
}

.fr-main-container {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
	box-sizing: border-box;
}

.fr-card {
	background: var(--pv-card-bg, #ffffff);
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	border-radius: 1.25rem;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	padding: 2rem;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.fr-topbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.fr-logo {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	border-radius: 0.5rem;
}

.fr-title-group {
	flex: 1;
	text-align: left;
}

.fr-title {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0 0 0.25rem 0;
	color: var(--pv-heading-text, #0f172a);
	letter-spacing: -0.025em;
}

.fr-subtitle {
	font-size: 0.95rem;
	color: var(--pv-muted-text, #64748b);
	margin: 0;
	line-height: 1.4;
}

/* Progress Bar */
.fr-progress-wrap {
	margin-bottom: 1.5rem;
}

.fr-progress-track {
	width: 100%;
	height: 8px;
	background: var(--pv-input-bg, #e2e8f0);
	border-radius: 9999px;
	overflow: hidden;
	position: relative;
}

.fr-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #3b82f6);
	border-radius: 9999px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HUD Header */
.fr-hud {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	flex-wrap: wrap;
}

.fr-hud-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--pv-panel-bg, #f8fafc);
	border: 1px solid var(--pv-border, #e2e8f0);
	border-radius: 9999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--pv-text, #1e293b);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fr-hud-label {
	color: var(--pv-muted-text, #64748b);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.fr-hud-value {
	font-weight: 800;
	color: var(--pv-heading-text, #0f172a);
}

.fr-hud-slash {
	margin: 0 0.15rem;
	color: var(--pv-muted-text, #94a3b8);
	font-weight: 400;
}

.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.25rem;
	width: 1.25rem;
	color: #ef4444;
}

.fr-hud-timer {
	color: #ef4444;
	font-variant-numeric: tabular-nums;
}

.fr-timer-text {
	font-weight: 800;
}

.fr-hud-score {
	background: rgba(99, 102, 241, 0.08);
	border-color: rgba(99, 102, 241, 0.2);
}

.fr-hud-score .fr-hud-value {
	color: #6366f1;
}

/* Question Prompt Card */
.fr-question-card {
	background: var(--pv-panel-bg, #f8fafc);
	border: 1px solid var(--pv-border, #e2e8f0);
	border-radius: 1rem;
	padding: 1.75rem;
	margin-bottom: 1.75rem;
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.fr-question-text {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--pv-heading-text, #0f172a);
	text-align: center;
	line-height: 1.45;
	margin: 0;
}

.fr-question-text .question-image {
	max-height: 220px;
	width: auto;
	object-fit: contain;
	border-radius: 0.75rem;
	margin: 1rem auto 0 auto;
	display: block;
}

.fr-question-text .question-text-img-text {
	display: block;
	margin-bottom: 1rem;
}

/* Options Grid */
.options-grid,
.fr-options-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
	.options-grid,
	.fr-options-grid {
		grid-template-columns: 1fr;
	}
	.fr-card {
		padding: 1.25rem;
		border-radius: 1rem;
	}
	.fr-question-card {
		padding: 1.25rem;
	}
	.fr-question-text {
		font-size: 1.15rem;
	}
}

/* Option Buttons */
.option-button {
	width: 100%;
	min-height: 58px;
	padding: 0.85rem 1.15rem;
	background-color: var(--pv-card-bg, #ffffff);
	border: 2px solid var(--pv-border, #e2e8f0);
	border-radius: 0.875rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	color: var(--pv-text, #1e293b);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	gap: 0.85rem;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	box-sizing: border-box;
}

.option-button:hover:not(:disabled) {
	border-color: #6366f1;
	background-color: rgba(99, 102, 241, 0.04);
	transform: translateY(-2px);
	box-shadow: 0 6px 12px -2px rgba(99, 102, 241, 0.12);
}

.option-button:active:not(:disabled) {
	transform: scale(0.98);
}

.option-button:disabled {
	cursor: default;
	opacity: 0.95;
}

/* Option Letter Badge */
.option-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	background: var(--pv-input-bg, #e2e8f0);
	color: var(--pv-heading-text, #1e293b);
	font-size: 0.875rem;
	font-weight: 800;
	transition: all 0.2s ease;
}

.option-button:hover:not(:disabled) .option-letter {
	background: #6366f1;
	color: #ffffff;
}

.option-text {
	flex: 1;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

.option-image {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	border-radius: 0.375rem;
}

/* States */
.option-button.correct {
	border-color: #10b981 !important;
	background-color: rgba(16, 185, 129, 0.1) !important;
	color: #065f46 !important;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.option-button.correct .option-letter {
	background: #10b981 !important;
	color: #ffffff !important;
}

.option-button.incorrect {
	border-color: #ef4444 !important;
	background-color: rgba(239, 68, 68, 0.1) !important;
	color: #991b1b !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

.option-button.incorrect .option-letter {
	background: #ef4444 !important;
	color: #ffffff !important;
}

.option-button.selected {
	border-color: #6366f1 !important;
	background-color: rgba(99, 102, 241, 0.1) !important;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

.option-button.selected .option-letter {
	background: #6366f1 !important;
	color: #ffffff !important;
}

.option-button.demo-selected {
	border-color: #f59e0b !important;
	background-color: rgba(245, 158, 11, 0.1) !important;
	box-shadow: 0 0 14px rgba(245, 158, 11, 0.4) !important;
	animation: pulse-demo 1.5s infinite;
}

.option-button.help-hint {
	border-color: #f59e0b !important;
	background-color: rgba(245, 158, 11, 0.15) !important;
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.5) !important;
	animation: pulse-hint 1.5s infinite;
}

.option-button.help-hint .option-letter {
	background: #f59e0b !important;
	color: #ffffff !important;
}

@keyframes pulse-demo {
	0%, 100% {
		box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
	}
	50% {
		box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
	}
}

@keyframes pulse-hint {
	0%, 100% {
		box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
	}
	50% {
		box-shadow: 0 0 22px rgba(245, 158, 11, 0.9);
	}
}

.next-button {
	margin-top: 1.5rem;
	width: 100%;
	padding: 0.85rem 1.5rem;
	border-radius: 0.75rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--pv-accent, #6366f1);
	transition: all 0.2s;
	cursor: pointer;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.next-button:hover {
	background-color: var(--pv-accent-strong, #4f46e5);
	box-shadow: 0 4px 14px -2px rgba(99, 102, 241, 0.4);
}

.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 Hero & Score Card */
.results-container {
	text-align: center;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fr-results-hero {
	text-align: center;
	padding: 0.5rem 0 1.5rem 0;
}

.fr-results-badge-icon {
	font-size: 3.5rem;
	margin-bottom: 0.5rem;
	animation: bounce-badge 1s ease infinite alternate;
}

@keyframes bounce-badge {
	from { transform: translateY(0); }
	to { transform: translateY(-8px); }
}

.results-heading,
.fr-results-title {
	font-size: 2rem;
	font-weight: 800;
	color: var(--pv-heading-text, #0f172a);
	margin: 0 0 1.25rem 0;
	letter-spacing: -0.02em;
}

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

.fr-score-card {
	display: inline-block;
	background: var(--pv-panel-bg, #f8fafc);
	border: 1px solid var(--pv-border, #e2e8f0);
	border-radius: 1.25rem;
	padding: 1.5rem 2.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	min-width: 240px;
}

.fr-score-caption {
	display: block;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--pv-muted-text, #64748b);
	margin-bottom: 0.5rem;
}

.fr-score-big {
	font-size: 2.75rem;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.final-score {
	font-weight: 900;
	color: #6366f1;
}

.fr-score-divider {
	color: var(--pv-muted-text, #94a3b8);
	margin: 0 0.25rem;
}

.final-total-questions {
	font-weight: 900;
	color: var(--pv-heading-text, #0f172a);
}

.fr-score-percentage {
	font-size: 1rem;
	font-weight: 700;
	color: #10b981;
}

/* Personality Result Card */
.personality-result-card {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.08));
	border: 1px solid rgba(99, 102, 241, 0.25);
	border-radius: 1rem;
	padding: 1.75rem;
	margin: 1.5rem 0;
	text-align: left;
}

.personality-result-card h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.35rem;
	font-weight: 800;
	color: #6366f1;
}

.personality-name {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--pv-heading-text, #0f172a);
	margin-bottom: 0.5rem;
}

.personality-content {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pv-text, #1e293b);
	margin: 0 0 0.5rem 0;
}

.personality-description {
	font-size: 0.95rem;
	color: var(--pv-muted-text, #64748b);
	line-height: 1.5;
	margin: 0 0 0.5rem 0;
}

.personality-remark {
	font-size: 0.95rem;
	font-style: italic;
	color: #6366f1;
	margin: 0;
}

/* Results Actions & Buttons */
.fr-results-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.fr-btn {
	padding: 0.85rem 1.75rem;
	border-radius: 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.fr-btn:active {
	transform: scale(0.98);
}

.fr-btn-primary {
	background: #6366f1;
	color: #ffffff;
}

.fr-btn-primary:hover {
	background: #4f46e5;
	box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.4);
}

.restart-button,
.fr-btn-replay {
	width: auto;
	min-width: 160px;
	padding: 0.85rem 1.75rem;
	border-radius: 0.75rem;
	font-weight: 700;
	color: #fff;
	background-color: #10b981;
	transition: all 0.2s;
	cursor: pointer;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.restart-button:hover,
.fr-btn-replay:hover {
	background-color: #059669;
	box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.4);
}

.restart-button:focus,
.fr-btn-replay:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.fr-btn-next-game {
	background: #3b82f6;
	color: #ffffff;
}

.fr-btn-next-game:hover {
	background: #2563eb;
	box-shadow: 0 6px 16px -2px rgba(59, 130, 246, 0.4);
}

.fr-btn-secondary {
	background: var(--pv-input-bg, #e2e8f0);
	color: var(--pv-text, #1e293b);
}

.fr-btn-secondary:hover {
	background: var(--pv-border, #cbd5e1);
}

.fr-btn-outline {
	background: transparent;
	border: 1px solid var(--pv-border, #cbd5e1);
	color: var(--pv-text, #1e293b);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.fr-btn-outline:hover:not(:disabled) {
	border-color: #6366f1;
	color: #6366f1;
}

.fr-btn-outline:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fr-review-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	padding: 0.5rem 0;
}

.fr-review-counter {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--pv-heading-text, #0f172a);
}

.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 {
	display: inline-block;
	background: rgba(16, 185, 129, 0.12);
	color: #10b981;
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	font-size: 0.85rem;
	font-weight: 700;
	margin-left: 0.5rem;
}

.incorrect-text {
	display: inline-block;
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	font-size: 0.85rem;
	font-weight: 700;
	margin-left: 0.5rem;
}

.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;
}

/* Unified Modern Game Cards and Layouts */
.pt-card, .fc-card, .ctt-card, .wp-card, .wq-card, .bb-card, .ttt-card, .chess-card, .pr-card, .qb-card, .m3-card, .bs-card, .stfy-card, .ls-card, .fr-card, .sa-card, .ws-card, .bp-card, .sdk-card {
	background: var(--pv-card-bg, #ffffff);
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
	width: 100%;
	max-width: 980px;
	margin: 1rem auto;
	box-sizing: border-box;
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pt-body, .fc-body, .ctt-body, .wp-body, .wq-body, .bb-body, .ttt-body, .chess-body, .pr-body, .qb-body, .m3-body, .bs-body, .stfy-body, .ls-body, .fr-body, .sa-body, .ws-body, .bp-body, .sdk-body {
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.pt-body, .fc-body, .ctt-body, .wp-body, .wq-body, .bb-body, .ttt-body, .chess-body, .pr-body, .qb-body, .m3-body, .bs-body, .stfy-body, .ls-body, .fr-body, .sa-body, .ws-body, .bp-body, .sdk-body {
		padding: 1.25rem 0.85rem;
		gap: 1rem;
	}
}

/* Common Game Header */
.pt-header, .fc-header, .ctt-header, .wp-header, .wq-header, .bb-header, .ttt-header, .chess-header, .pr-header, .qb-header, .ls-header, .fr-header, .sa-header, .ws-header, .sdk-header {
	text-align: center;
	margin-bottom: 0.25rem;
}
.pt-title, .fc-title, .ctt-title, .wp-title, .wq-title, .bb-title, .ttt-title, .chess-title, .pr-title, .qb-title, .ls-title, .fr-title, .sa-title, .ws-title, .sdk-title {
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--pv-text, #0f172a);
	margin: 0 0 0.3rem 0;
}
.pt-subtitle, .fc-subtitle, .ctt-subtitle, .wp-subtitle, .wq-subtitle, .bb-subtitle, .ttt-subtitle, .chess-subtitle, .pr-subtitle, .qb-subtitle, .ls-subtitle, .fr-subtitle, .sa-subtitle, .ws-subtitle, .sdk-subtitle {
	font-size: 0.95rem;
	color: var(--pv-muted-text, #64748b);
	margin: 0;
	line-height: 1.45;
}

/* 2-Column Side-by-Side Layout: Game on Left, Settings on Right */
.pt-layout, .fc-layout, .ctt-layout, .wp-layout, .wq-layout, .bb-layout, .ttt-layout, .chess-layout, .pr-layout, .qb-layout, .bs-layout, .m3-layout, .stfy-layout, .ls-layout, .sa-layout, .ws-layout, .bp-layout, .sdk-layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 1.75rem;
	width: 100%;
	box-sizing: border-box;
}

.pt-left, .fc-left, .ctt-left, .wp-left, .wq-left, .bb-left, .ttt-left, .chess-left, .pr-left, .qb-left, .bs-left, .m3-left, .stfy-left, .ls-left, .sa-left, .ws-left, .bp-left, .sdk-left {
	flex: 1 1 520px;
	max-width: 580px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
	box-sizing: border-box;
}

.pt-right, .fc-right, .ctt-right, .wp-right, .wq-right, .bb-right, .ttt-right, .chess-right, .pr-right, .qb-right, .bs-right, .m3-right, .stfy-right, .ls-right, .sa-right, .ws-right, .bp-right, .sdk-right {
	flex: 0 0 310px;
	width: 310px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
}

/* Stats Pill Bar */
.pt-stats, .fc-topbar, .ctt-stats, .wp-stats, .wq-stats, .bb-stats, .ttt-stats, .chess-stats, .pr-stats, .qb-stats, .ls-stats, .sa-topbar, .ws-topbar, .sdk-stats {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	gap: 0.75rem;
	background: var(--pv-panel-bg, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	border-radius: 12px;
	padding: 0.6rem 1rem;
	box-sizing: border-box;
}

.pt-stat-pill {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pv-text, #0f172a);
}
.pt-stat-pill .pt-label {
	color: var(--pv-muted-text, #64748b);
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pt-stat-pill .pt-val {
	font-weight: 800;
	color: var(--pv-accent, #2563eb);
}

/* Puzzle Grid Styling */
.pt-grid-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
}

.pt-grid {
	display: grid;
	gap: 4px;
	width: 400px;
	height: 400px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vw - 40px);
	background: #0f172a;
	border: 4px solid var(--pv-border, rgba(0, 0, 0, 0.15));
	border-radius: 16px;
	overflow: hidden;
	padding: 4px;
	box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
	user-select: none;
	touch-action: manipulation;
}

@media (max-width: 480px) {
	.pt-grid {
		width: 320px;
		height: 320px;
	}
}

.pt-tile {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	cursor: grab;
	box-sizing: border-box;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, filter 0.18s ease;
	position: relative;
	background-repeat: no-repeat;
	-webkit-tap-highlight-color: transparent;
}

.pt-tile:hover {
	transform: scale(1.03);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.pt-tile.dragging {
	opacity: 0.75;
	transform: scale(1.06);
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
	border: 2px dashed #3b82f6;
	z-index: 10;
}

.pt-tile-selected {
	outline: 3px solid #3b82f6 !important;
	outline-offset: -2px;
	transform: scale(1.05);
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.75) !important;
	z-index: 5;
}

/* Action Buttons */
.pt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	width: 100%;
}

.pt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.25rem;
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	user-select: none;
}

.pt-btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: #ffffff;
}
.pt-btn-primary:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

.pt-btn-success {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #ffffff;
}
.pt-btn-success:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
}

.pt-btn-secondary {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
	color: #ffffff;
}
.pt-btn-secondary:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(139, 92, 246, 0.35);
}

/* Settings Panels on Right (Desktop) / Bottom (Mobile) */
.pt-panel, .fc-panel, .ctt-panel, .wp-panel {
	background: var(--pv-panel-bg, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	border-radius: 16px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: 100%;
	box-sizing: border-box;
}

.pt-panel-title, .fc-panel-title, .ctt-panel-title, .wp-panel-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pv-text, #0f172a);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--pv-border, rgba(0, 0, 0, 0.06));
	padding-bottom: 0.6rem;
	margin-bottom: 0.1rem;
}

.pt-row, .fc-row, .ctt-row, .wp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}
.pt-row label, .fc-row label, .ctt-row label, .wp-row label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--pv-text, #1e293b);
	white-space: nowrap;
}
.pt-select, .fc-select, .ctt-select, .wp-select {
	font: inherit;
	background: var(--pv-input-bg, #ffffff);
	color: var(--pv-text, #0f172a);
	border: 1px solid var(--pv-border, #cbd5e1);
	border-radius: 10px;
	padding: 0.45rem 0.7rem;
	font-size: 0.88rem;
	font-weight: 500;
	flex: 1;
	max-width: 165px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pt-select:focus, .fc-select:focus, .ctt-select:focus, .wp-select:focus {
	border-color: var(--pv-accent, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Target Preview Card */
.pt-preview-card {
	background: var(--pv-panel-bg, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	border-radius: 16px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	width: 100%;
	box-sizing: border-box;
}
.pt-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--pv-text, #0f172a);
}
.pt-preview-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.1));
	background: #1e293b;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-preview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 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
}

/* Chess SDK */
.pv-chess-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pv-chess-board {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	border: 8px solid #5a5a5a;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.pv-chess-square {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(32px, 8vw, 64px);
	position: relative;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.pv-chess-square.selected {
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.pv-chess-move-dot {
	position: absolute;
	width: 30%;
	height: 30%;
	background: rgba(121, 166, 51, 0.7);
	border-radius: 50%;
	pointer-events: none;
}

.pv-chess-piece-white {
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

.pv-chess-piece-black {
	color: #0a0a0a;
	text-shadow: 1px 1px 2px #fff;
}

.pv-chess-status {
	text-align: center;
	font-weight: 700;
	font-size: 1.1rem;
	background: rgba(0, 0, 0, 0.25);
	padding: 10px 14px;
	border-radius: 10px;
}

.pv-chess-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.pv-chess-button,
.pv-chess-select {
	padding: 10px 18px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: #16a085;
	color: #fff;
	box-shadow: 0 4px #1abc9c;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	min-width: 160px;
	text-align: center;
}

.pv-chess-button:hover,
.pv-chess-select:hover {
	box-shadow: 0 2px #1abc9c;
	transform: translateY(2px);
}

.pv-chess-button:active,
.pv-chess-select:active {
	box-shadow: none;
	transform: translateY(4px);
}

@media (max-width: 640px) {
	.pv-chess-button,
	.pv-chess-select {
		width: 100%;
	}
}

/* TicTacToe SDK */
.pv-ttt-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.pv-ttt-status {
	font-weight: 700;
	font-size: 1.2rem;
	text-align: center;
	min-height: 1.6em;
}

.pv-ttt-board {
	display: grid;
	grid-template-columns: repeat(var(--pv-ttt-grid-size, 3), var(--pv-ttt-cell-size, 100px));
	grid-template-rows: repeat(var(--pv-ttt-grid-size, 3), var(--pv-ttt-cell-size, 100px));
	gap: 10px;
}

.pv-ttt-cell {
	width: var(--pv-ttt-cell-size, 100px);
	height: var(--pv-ttt-cell-size, 100px);
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--pv-ttt-cell-size, 100px) * 0.7);
	font-weight: 700;
	background: rgba(17, 24, 39, 0.9);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
}

.pv-ttt-cell-content {
	position: absolute;
	right: 5px;
	bottom: 3px;
	left: 5px;
	overflow: hidden;
	font-size: 0.65rem;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.8;
}

.pv-ttt-mark {
	position: relative;
	z-index: 1;
	line-height: 1;
}

.pv-ttt-cell:not(.pv-ttt-x):not(.pv-ttt-o):hover {
	background: rgba(55, 65, 81, 0.9);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.pv-ttt-cell.pv-ttt-x {
	color: var(--pv-ttt-x-color, #ef4444);
}

.pv-ttt-cell.pv-ttt-o {
	color: var(--pv-ttt-o-color, #3b82f6);
}

.pv-ttt-cell.pv-ttt-win {
	background: var(--pv-ttt-win-color, #10b981);
	color: #ffffff;
	box-shadow: 0 0 18px rgba(16, 185, 129, 0.8);
	transform: scale(1.04);
}

.pv-ttt-controls {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pv-ttt-button {
	width: 100%;
	max-width: 260px;
	padding: 14px 18px;
	border-radius: 10px;
	border: none;
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	background: linear-gradient(145deg, #10b981, #059669);
	color: #ffffff;
	box-shadow: 0 4px #047857;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pv-ttt-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px #047857;
}

.pv-ttt-button:active {
	transform: translateY(2px);
	box-shadow: 0 2px #047857;
}

@media (max-width: 520px) {
	.pv-ttt-board {
		gap: 8px;
	}
}

/* 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: 4/4;
	perspective: 2000px
}

.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, minmax(0, 1fr));
	grid-template-rows: repeat(10, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 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
}

/* WordPuzzle styles */
#wp-main {
	max-width: 720px;
	margin: 0 auto;
	gap: 12px;
}

.wp-score-bar {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 600;
}

.wp-word-display {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 12px 0 4px;
}

.wp-letter-slot {
	min-width: clamp(42px, 8vw, 60px);
	min-height: clamp(50px, 10vw, 72px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.35rem, 4vw, 2.2rem);
	font-weight: 800;
	border-radius: 12px;
	border: 2px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-letter-slot.is-static {
	border-style: dashed;
	cursor: default;
}

.wp-letter-slot.is-space {
	border: none;
	background: transparent;
	min-width: 18px;
	min-height: auto;
}

.wp-letter-slot.is-selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px var(--pv-accent-ring);
	transform: scale(1.03);
}

.wp-letter-slot.is-locked {
	cursor: default;
	opacity: 0.88;
}

.wp-letter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
	gap: 10px;
	width: 100%;
	max-width: 420px;
	margin: 10px auto 0;
}

.wp-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 0;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wp-letter:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
	background: var(--pv-card-bg-hover);
}

.wp-letter:disabled {
	opacity: 0.45;
	transform: none;
	box-shadow: none;
}

.wp-actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 480px) {
	.wp-letter-slot {
		min-width: clamp(38px, 11vw, 52px);
		min-height: clamp(44px, 12vw, 60px);
		font-size: clamp(1.2rem, 5vw, 1.8rem);
	}

	.wp-letter {
		padding: 12px 0;
		font-size: 1.1rem;
	}
}

/* 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; }

/* FactRush: Personality Result Card */
.personality-result-card {
	background: var(--pv-card-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	box-shadow: var(--pv-shadow);
	max-width: 680px;
	text-align: left;
}
.personality-result-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pv-heading-text);
}
.personality-result-card .personality-name {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.personality-result-card .personality-content {
	font-weight: 600;
	margin: 0.25rem 0;
}
.personality-result-card .personality-description {
	color: var(--pv-muted-text);
	margin: 0.25rem 0;
}
.personality-result-card .personality-remark {
	color: var(--pv-accent-strong);
	font-weight: 700;
	margin-top: 0.5rem;
}

/* ==========================================================================
   SUDOKU MASTER SDK STYLES
   ========================================================================== */
.sdk-board-wrap {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sdk-grid {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	grid-template-rows: repeat(9, minmax(0, 1fr));
	aspect-ratio: 1 / 1;
	width: min(410px, 78vmin);
	background: var(--pv-card-bg, #ffffff);
	border: 3px solid #1e293b;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.14);
	user-select: none;
	touch-action: manipulation;
	box-sizing: border-box;
}

:root[data-theme="dark"] .sdk-grid {
	border-color: #475569;
	background: #0f172a;
}

.sdk-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(0.95rem, 3.2vmin, 1.45rem);
	font-weight: 700;
	color: var(--pv-text, #0f172a);
	border-right: 1px solid rgba(148, 163, 184, 0.35);
	border-bottom: 1px solid rgba(148, 163, 184, 0.35);
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
	box-sizing: border-box;
}

.sdk-col-2, .sdk-col-5 {
	border-right: 2.5px solid #1e293b !important;
}
.sdk-col-8 {
	border-right: none !important;
}
.sdk-row-2, .sdk-row-5 {
	border-bottom: 2.5px solid #1e293b !important;
}
.sdk-row-8 {
	border-bottom: none !important;
}

:root[data-theme="dark"] .sdk-col-2,
:root[data-theme="dark"] .sdk-col-5 {
	border-right-color: #64748b !important;
}
:root[data-theme="dark"] .sdk-row-2,
:root[data-theme="dark"] .sdk-row-5 {
	border-bottom-color: #64748b !important;
}

.sdk-cell.is-fixed {
	color: var(--pv-heading-text, #0f172a);
	font-weight: 800;
}
.sdk-cell.is-user {
	color: #2563eb;
}
:root[data-theme="dark"] .sdk-cell.is-user {
	color: #60a5fa;
}
.sdk-cell.is-related {
	background-color: rgba(59, 130, 246, 0.08);
}
.sdk-cell.is-same-num {
	background-color: rgba(59, 130, 246, 0.22);
}
.sdk-cell.is-selected {
	background-color: rgba(59, 130, 246, 0.38) !important;
	box-shadow: inset 0 0 0 2px #2563eb;
}
.sdk-cell.is-error {
	background-color: rgba(239, 68, 68, 0.22) !important;
	color: #dc2626 !important;
	animation: wq-shake 0.3s ease;
}

.sdk-notes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	width: 100%;
	height: 100%;
	padding: 1px;
	pointer-events: none;
}
.sdk-notes-grid span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(0.4rem, 1.3vmin, 0.62rem);
	font-weight: 600;
	color: var(--pv-muted-text, #64748b);
	line-height: 1;
}

.sdk-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.85);
	backdrop-filter: blur(4px);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	color: #ffffff;
	text-align: center;
	padding: 1rem;
}

.sdk-controls-deck {
	width: 100%;
	max-width: 410px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sdk-tools-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.4rem;
	width: 100%;
}

.sdk-tool-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0.4rem 0.25rem;
	border-radius: 10px;
	border: 1px solid var(--pv-border);
	background: var(--pv-panel-bg);
	color: var(--pv-text);
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
}
.sdk-tool-btn:hover {
	border-color: var(--pv-accent);
	background: var(--pv-card-bg-hover);
}
.sdk-tool-btn.is-active {
	border-color: var(--pv-accent);
	background: rgba(59, 130, 246, 0.12);
	color: var(--pv-accent);
}
.sdk-tool-icon {
	font-size: 1rem;
	line-height: 1;
}
.sdk-notes-badge {
	position: absolute;
	top: 2px;
	right: 4px;
	font-size: 0.55rem;
	padding: 1px 4px;
	border-radius: 9999px;
	background: rgba(100, 116, 139, 0.2);
	color: var(--pv-muted-text);
	font-weight: 800;
}
.sdk-notes-badge.is-on {
	background: #2563eb;
	color: #ffffff;
}

.sdk-numpad {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 0.35rem;
	width: 100%;
}

.sdk-num-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.15rem;
	border-radius: 10px;
	border: 1px solid var(--pv-border);
	background: var(--pv-panel-bg);
	color: var(--pv-heading-text);
	cursor: pointer;
	transition: all 0.15s ease;
	user-select: none;
}
.sdk-num-btn:hover {
	background: var(--pv-accent);
	color: #ffffff;
	border-color: var(--pv-accent);
	transform: translateY(-1px);
}
.sdk-num-btn.is-depleted {
	opacity: 0.28;
	pointer-events: none;
}
.sdk-num-digit {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.1;
}
.sdk-num-rem {
	font-size: 0.6rem;
	opacity: 0.7;
	font-weight: 600;
	line-height: 1;
}

.sdk-icon-btn {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
}

/* ==========================================================================
   ENHANCED STUDIO HUB, FLOATING QUICK-BAR & RESPONSIVE MULTI-GAME POLISH
   ========================================================================== */

/* 1. In-Game Floating Quick Switcher & Toolbar */
/* When using SDK at studio setup, hide pv-floating-bar because it is never used */
.is-studio-setup .pv-floating-bar,
.is-studio-setup #pv-floating-bar,
[data-studio="1"] .pv-floating-bar,
[data-studio="1"] #pv-floating-bar {
	display: none !important;
}

.pv-floating-bar {
	position: sticky;
	top: 12px;
	z-index: 10000;
	width: calc(100% - 24px);
	max-width: 960px;
	margin: 0 auto 16px;
	animation: pvFadeDown 0.3s ease-out;
}

@keyframes pvFadeDown {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

.pv-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--pv-card-bg);
	background: color-mix(in srgb, var(--pv-card-bg) 88%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--pv-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
	border-radius: 9999px;
	padding: 6px 14px;
	box-sizing: border-box;
}

.pv-bar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.pv-bar-hub-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(2, 132, 199, 0.1);
	color: #0284c7;
	border: 1px solid rgba(2, 132, 199, 0.2);
	border-radius: 9999px;
	padding: 6px 12px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.pv-bar-hub-btn:hover {
	background: #0284c7;
	color: #ffffff;
	transform: translateY(-1px);
}

.pv-bar-divider {
	width: 1px;
	height: 18px;
	background: var(--pv-border);
	flex-shrink: 0;
}

.pv-bar-select-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
	max-width: 380px;
}

.pv-bar-cur-icon {
	font-size: 1.15rem;
	line-height: 1;
	flex-shrink: 0;
}

.pv-bar-select {
	background: var(--pv-input-bg);
	color: var(--pv-text);
	border: 1px solid var(--pv-border);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	text-overflow: ellipsis;
	outline: none;
	transition: border-color 0.15s ease;
}

.pv-bar-select:focus {
	border-color: var(--pv-accent);
}

.pv-bar-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.pv-bar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pv-bar-btn:hover {
	background: var(--pv-panel-bg);
	transform: scale(1.05);
}

@media (max-width: 580px) {
	.pv-bar-hub-text {
		display: none;
	}
	.pv-bar-inner {
		padding: 5px 10px;
	}
}

/* 2. Studio Hub Catalog UI */
.pv-studio-hub {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	animation: pvFadeUp 0.35s ease-out;
}

@keyframes pvFadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.pv-hub-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 20px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.pv-hub-header {
		flex-direction: row;
		align-items: center;
		padding: 28px 32px;
	}
}

.pv-hub-brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pv-hub-logo-badge {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
	color: #ffffff;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
	flex-shrink: 0;
}

.pv-hub-badge-tag {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.8px;
	color: #0284c7;
	background: rgba(2, 132, 199, 0.1);
	border-radius: 6px;
	padding: 3px 8px;
	display: inline-block;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.pv-hub-title {
	font-size: 1.65rem;
	font-weight: 900;
	letter-spacing: -0.5px;
	color: var(--pv-heading-text);
	margin: 0 0 4px;
	line-height: 1.2;
}

.pv-hub-subtitle {
	font-size: 0.95rem;
	color: var(--pv-muted-text);
	margin: 0;
	opacity: 0.9;
}

.pv-hub-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pv-hub-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid var(--pv-border);
	background: var(--pv-input-bg);
	color: var(--pv-text);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv-hub-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.pv-hub-btn-primary {
	background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
	color: #ffffff;
	border: none;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}

.pv-hub-btn-primary:hover {
	background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38);
	color: #ffffff;
}

/* Toolbar: Search and Filter Pills */
.pv-hub-toolbar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

@media (min-width: 860px) {
	.pv-hub-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.pv-hub-search-wrap {
	position: relative;
	width: 100%;
	max-width: 380px;
}

.pv-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	opacity: 0.6;
	pointer-events: none;
}

.pv-hub-search-input {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border-radius: 12px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-text);
	font-size: 0.925rem;
	box-sizing: border-box;
	outline: none;
	transition: all 0.15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.pv-hub-search-input:focus {
	border-color: #0284c7;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.pv-category-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.pv-category-pills::-webkit-scrollbar {
	display: none;
}

.pv-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 9999px;
	border: 1px solid var(--pv-border);
	background: var(--pv-card-bg);
	color: var(--pv-muted-text);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.pv-pill:hover {
	border-color: #0284c7;
	color: #0284c7;
}

.pv-pill.active {
	background: #0284c7;
	color: #ffffff;
	border-color: #0284c7;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

/* 3. Game Cards Grid */
.pv-game-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.pv-game-card {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	border-radius: 18px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.pv-game-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
	border-color: rgba(2, 132, 199, 0.35);
}

.pv-game-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.pv-game-icon {
	font-size: 2.2rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pv-game-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.pv-game-category {
	font-size: 0.725rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748b;
}

.pv-game-badge {
	font-size: 0.7rem;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 6px;
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.pv-game-title {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--pv-heading-text);
	margin: 0 0 8px;
	letter-spacing: -0.3px;
}

.pv-game-desc {
	font-size: 0.885rem;
	color: var(--pv-muted-text);
	line-height: 1.5;
	margin: 0 0 18px;
	flex: 1;
}

.pv-game-card-footer {
	padding-top: 14px;
	border-top: 1px solid var(--pv-border);
}

.pv-btn-play {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
	color: #ffffff;
	border: none;
	font-weight: 800;
	font-size: 0.925rem;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.pv-btn-play:hover {
	background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
	transform: translateY(-1px);
}

.pv-play-arrow {
	font-size: 0.85rem;
	transition: transform 0.2s ease;
}

.pv-btn-play:hover .pv-play-arrow {
	transform: translateX(3px);
}

.pv-hub-footer {
	text-align: center;
	padding: 20px;
	border-top: 1px solid var(--pv-border);
	color: var(--pv-muted-text);
	font-size: 0.85rem;
}

.pv-footer-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pv-footer-links a {
	color: #0284c7;
	text-decoration: none;
	font-weight: 600;
}

.pv-footer-links a:hover {
	text-decoration: underline;
}

/* 4. Universal Responsive Game Canvas & Board Scaling */
canvas {
	max-width: 100% !important;
	height: auto !important;
	touch-action: manipulation;
}

.bs-container, .m3-container, .bb-container, .stk-container, .ctt-container {
	max-width: 100%;
	box-sizing: border-box;
}

/* Ensure Side-by-Side Games Stack Gracefully on Mobile & Tablets */
@media (max-width: 880px) {
	.pt-layout,
	.bs-layout,
	.m3-layout,
	.bb-layout,
	.stk-layout,
	.ctt-layout,
	.fc-layout,
	.wp-layout,
	.wq-layout,
	.ttt-layout,
	.chess-layout,
	.pr-layout,
	.qb-layout,
	.ls-layout,
	.sa-layout,
	.ws-layout,
	.main-container,
	#monopoly-game-container,
	#game-content-wrapper,
	#mainGameArea,
	#gameAndImageContainer {
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.pt-left, .pt-right,
	.bs-left, .bs-right,
	.m3-left, .m3-right,
	.bb-left, .bb-right,
	.stk-left, .stk-right,
	.ctt-left, .ctt-right,
	.fc-left, .fc-right,
	.wp-left, .wp-right,
	.wq-left, .wq-right,
	.ttt-left, .ttt-right,
	.chess-left, .chess-right,
	.pr-left, .pr-right,
	.qb-left, .qb-right,
	.ls-left, .ls-right,
	.sa-left, .sa-right,
	.ws-left, .ws-right,
	.game-area, .sidebar,
	#game-container, #controls-container,
	#bp-player-info, #bp-scores {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}

	/* Game settings panel firmly at bottom on mobile */
	.pt-right, .bs-right, .m3-right, .bb-right, .stk-right, .ctt-right, .fc-right, .wp-right, .wq-right, .ttt-right, .chess-right, .pr-right, .qb-right, .ls-right, .sa-right, .ws-right, .sidebar, #controls-container {
		order: 2 !important;
		margin-top: 10px !important;
	}

	/* Game play board firmly on top on mobile */
	.pt-left, .bs-left, .m3-left, .bb-left, .stk-left, .ctt-left, .fc-left, .wp-left, .wq-left, .ttt-left, .chess-left, .pr-left, .qb-left, .ls-left, .sa-left, .ws-left, .game-area, #game-container {
		order: 1 !important;
	}
}

/* 5. Mobile Ergonomic Touch Controls & D-Pads */
.pad, .bs-pad, .ctt-pad, .stk-pad {
	display: grid;
	grid-template-areas:
		". up ."
		"left . right"
		". down .";
	gap: 8px;
	width: 180px;
	margin: 12px auto;
	touch-action: manipulation;
}

.pad button, .bs-pad button, .ctt-pad button, .stk-pad button {
	min-width: 48px;
	min-height: 48px;
	border-radius: 14px;
	border: none;
	color: #ffffff;
	background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
	font-size: 20px;
	font-weight: 900;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, filter 0.1s ease;
	user-select: none;
	-webkit-user-select: none;
}

.pad button:active, .bs-pad button:active, .ctt-pad button:active, .stk-pad button:active {
	transform: scale(0.92);
	filter: brightness(0.9);
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

/* 6. Refined Game Stats Badges across all games */
.bs-stats, .m3-top, .bb-stats, .ctt-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding: 4px 2px;
	width: 100%;
	box-sizing: border-box;
}

#bs-score, #bs-timer, #m3-score, #m3-timer, #bb-score, #bb-lives, #stk-score, #stk-lines, #ctt-moves {
	background: var(--pv-card-bg);
	border: 1px solid var(--pv-border);
	padding: 6px 14px;
	border-radius: 9999px;
	font-weight: 800;
	font-size: 0.9rem;
	color: var(--pv-heading-text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* 7. EmotionTracker Mobile Polish */
@media (max-width: 520px) {
	.emoji-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}
	.emoji-button {
		min-height: 64px !important;
		padding: 6px !important;
	}
	.emoji-emoji {
		font-size: 24px !important;
	}
	.emoji-label {
		font-size: 11px !important;
	}
	.et-card {
		padding: 14px !important;
	}
}

/* 8. 3D FlipCards Animation & Grid Polish */
.fc-card-grid, .card-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 640px;
	margin: 16px auto;
}

@media (min-width: 640px) {
	.fc-card-grid, .card-container {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
}

.small-card {
	perspective: 1000px;
	aspect-ratio: 3/4;
	width: 100%;
	cursor: pointer;
}

.card-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.small-card.flipped .card-inner {
	transform: rotateY(180deg);
}

.card-front, .card-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--pv-border);
}

.card-front {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	color: #38bdf8;
	font-size: 2rem;
}

.card-back {
	background: var(--pv-card-bg);
	color: var(--pv-heading-text);
	transform: rotateY(180deg);
	font-size: 1.5rem;
	font-weight: 800;
}

/* 9. WordQuest & QuestBoard Board Sizing */
#game-board, .wp-board {
	width: 100% !important;
	max-width: 580px !important;
	aspect-ratio: 1/1 !important;
	margin: 0 auto !important;
	border-radius: 16px;
	box-sizing: border-box;
}

/* 10. PixelRunner Canvas Container */
#pr-container, #cq-container {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 11. Responsive Buttons across all games */
.bs-btn, .m3-btn, .bb-btn, .stk-btn, .bp-btn, .next-button, .pv-btn {
	min-height: 44px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* 12. Studio Setup & Simulator In-Game Config Suppression */
/* Games in Studio are 100% controlled by Studio Setup (similar to FactRush) */
.is-studio-setup #pv-floating-bar,
.is-studio-setup #bs-overlay .bs-row,
.is-studio-setup #bs-overlay .bs-subtitle,
.is-studio-setup #bs-main .bs-panel .bs-row:has(select),
.is-studio-setup #bs-main .bs-panel .bs-row:has(#bs-action),
.is-studio-setup #bb-ui:not(:has(#bb-ui-btn:not(.bb-hidden))),
.is-studio-setup .bb-right .pt-panel,
.is-studio-setup .bp-right .bp-panel:has(select),
.is-studio-setup .bp-right .bp-panel:has(#bp-start),
.is-studio-setup .pt-right .pt-panel:has(select),
.is-studio-setup .m3-right .m3-panel .m3-row,
.is-studio-setup .m3-right .m3-panel .label,
.is-studio-setup .m3-right .m3-panel span,
.is-studio-setup .stfy-right .stfy-panel,
.is-studio-setup .ctt-right .ctt-panel,
.is-studio-setup .pr-right .pt-panel .pr-customization-controls,
.is-studio-setup #pr-startGameButton,
.is-studio-setup .pv-chess-select,
.is-studio-setup #difficultySelect,
.is-studio-setup label[for="difficultySelect"] {
	display: none !important;
}

/* ========================================================
   Corner Guide & Match Info Modal (Focus on Game Mode)
   ======================================================== */
.pt-card, .fc-card, .ctt-card, .wp-card, .wq-card, .bb-card,
.ttt-card, .chess-card, .pr-card, .qb-card, .m3-card, .bs-card,
.stfy-card, .ls-card, .fr-card, .sa-card, .ws-card, .bp-card,
.sdk-card, .play-card {
	position: relative !important;
}

/* Floating Corner Guide Button */
.pv-corner-guide-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--pv-text, #0f172a);
	background: var(--pv-panel-bg, rgba(255, 255, 255, 0.92));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.12));
	border-radius: 9999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	user-select: none;
	outline: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pv-corner-guide-btn:hover {
	transform: translateY(-1px) scale(1.03);
	background: var(--pv-card-bg, #ffffff);
	border-color: var(--pv-accent, #6366f1);
	color: var(--pv-accent, #6366f1);
	box-shadow: 0 6px 18px rgba(99, 102, 241, 0.22), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.pv-corner-guide-btn:active {
	transform: translateY(0) scale(0.98);
}
.pv-corner-guide-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke: currentColor;
}
@media (max-width: 540px) {
	.pv-corner-guide-btn {
		top: 10px;
		right: 10px;
		padding: 6px 8px;
	}
	.pv-corner-guide-btn .pv-corner-guide-label {
		display: none;
	}
}

/* Focused Layout: Center and expand game area when guide is in modal */
.pv-focused-layout .ttt-right,
.pv-focused-layout .chess-right,
.pv-focused-layout .fc-right,
.pv-focused-layout .ws-right,
.pv-focused-layout .sa-right,
.pv-focused-layout .wp-right,
.pv-focused-layout .wq-right {
	display: none !important;
}

.pv-focused-layout .ttt-left,
.pv-focused-layout .chess-left,
.pv-focused-layout .fc-left,
.pv-focused-layout .ws-left,
.pv-focused-layout .sa-left,
.pv-focused-layout .wp-left,
.pv-focused-layout .wq-left {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Corner Guide Modal Backdrop & Dialog */
.pv-guide-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
	box-sizing: border-box;
}
.pv-guide-modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}
.pv-guide-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--pv-card-bg, #ffffff);
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	transform: scale(0.93) translateY(14px);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
	color: var(--pv-text, #0f172a);
}
.pv-guide-modal-backdrop.is-open .pv-guide-modal {
	transform: scale(1) translateY(0);
}
.pv-guide-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	padding-bottom: 0.75rem;
}
.pv-guide-modal-title {
	font-size: 1.18rem;
	font-weight: 800;
	color: var(--pv-heading-text, var(--pv-text, #0f172a));
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	letter-spacing: -0.015em;
}
.pv-guide-modal-title svg {
	color: var(--pv-accent, #6366f1);
	flex-shrink: 0;
}
.pv-guide-modal-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pv-panel-bg, rgba(0, 0, 0, 0.05));
	border: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	color: var(--pv-muted-text, #64748b);
	font-size: 1.1rem;
	cursor: pointer;
	outline: none;
	transition: all 0.15s ease;
}
.pv-guide-modal-close:hover {
	background: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
	transform: scale(1.08);
}
.pv-guide-modal-body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--pv-text, #1e293b);
}
.pv-guide-modal-body p {
	margin: 0 0 8px 0;
}
.pv-guide-modal-footer {
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid var(--pv-border, rgba(0, 0, 0, 0.08));
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}
.pv-guide-modal-footer-btn {
	padding: 0.55rem 1.35rem;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: 10px;
	background: var(--pv-accent, #6366f1);
	color: #ffffff;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
	transition: filter 0.15s ease, transform 0.15s ease;
}
.pv-guide-modal-footer-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* ========================================================
   Compact / Small Device Game Focus System
   Prioritizes Game Board & Controls over descriptions/logos
   Applies to Circle, Square, Mobile, and compact screens
   ======================================================== */
@media (max-width: 480px), (max-height: 520px), (max-aspect-ratio: 1.15/1) and (max-height: 480px) {
	/* 1. Hide all secondary descriptions, subtitles & non-game panels */
	.pt-subtitle, .fc-subtitle, .ctt-subtitle, .wp-subtitle, .wq-subtitle,
	.bb-subtitle, .ttt-subtitle, .chess-subtitle, .pr-subtitle, .qb-subtitle,
	.ls-subtitle, .fr-subtitle, .sa-subtitle, .ws-subtitle, .m3-subtitle,
	.bs-subtitle, .stfy-subtitle, .bp-subtitle,
	#pv-description, #ws-subtitle, #ttt-description, #ws-feedback,
	.game-subtitle, .card-subtitle, .pt-panel-guide,
	.is-studio-setup .pt-panel-guide {
		display: none !important;
	}

	/* 2. Hide logos to maximize game space */
	#pv-logo, .pv-logo, .pt-logo, .game-logo, img[alt="Logo"] {
		display: none !important;
	}

	/* 3. Hide right-hand panels / instruction sidebars */
	.pt-right, .fc-right, .ctt-right, .wp-right, .wq-right,
	.bb-right, .ttt-right, .chess-right, .pr-right, .qb-right,
	.bs-right, .m3-right, .stfy-right, .ls-right, .sa-right,
	.ws-right, .sidebar, #controls-container, .settings-container,
	.pt-panel-title {
		display: none !important;
	}

	/* 4. Streamlined header & title */
	.pt-header, .fc-header, .ctt-header, .wp-header, .wq-header,
	.bb-header, .ttt-header, .chess-header, .pr-header, .qb-header,
	.ls-header, .fr-header, .sa-header, .ws-header {
		margin: 0 0 2px 0 !important;
		padding: 0 !important;
		text-align: center !important;
		width: 100% !important;
		flex-shrink: 0 !important;
	}

	.pt-title, .fc-title, .ctt-title, .wp-title, .wq-title,
	.bb-title, .ttt-title, .chess-title, .pr-title, .qb-title,
	.ls-title, .fr-title, .sa-title, .ws-title, .m3-title,
	.bs-title, .stfy-title, .bp-title,
	#pv-name, #ws-title, #ttt-title {
		font-size: 0.92rem !important;
		line-height: 1.15 !important;
		font-weight: 800 !important;
		letter-spacing: -0.01em !important;
		margin: 0 auto !important;
		padding: 0 26px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 82% !important;
	}

	/* 5. Minimalist Corner Guide Button */
	.pv-corner-guide-btn {
		top: 4px !important;
		right: 4px !important;
		padding: 3px !important;
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		border-radius: 50% !important;
		justify-content: center !important;
		z-index: 80 !important;
		background: rgba(15, 23, 42, 0.75) !important;
		color: #38bdf8 !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
	}
	.pv-corner-guide-btn .pv-corner-guide-label {
		display: none !important;
	}
	.pv-corner-guide-btn svg {
		width: 14px !important;
		height: 14px !important;
	}

	/* 6. Containers & Cards: Maximize viewport area */
	html, body {
		width: 100% !important;
		height: 100% !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#template-container {
		width: 100% !important;
		height: 100% !important;
		min-height: 100% !important;
		max-height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		overflow: hidden !important;
		padding: 0 !important;
	}
	.play-container-main {
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		overflow: hidden !important;
	}
	.pt-card, .fc-card, .ctt-card, .wp-card, .wq-card, .bb-card,
	.ttt-card, .chess-card, .pr-card, .qb-card, .m3-card, .bs-card,
	.stfy-card, .ls-card, .fr-card, .sa-card, .ws-card, .bp-card,
	.sdk-card, .play-card {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		margin: 0 !important;
		overflow: hidden !important;
	}
	.pt-body, .fc-body, .ctt-body, .wp-body, .wq-body, .bb-body,
	.ttt-body, .chess-body, .pr-body, .qb-body, .m3-body, .bs-body,
	.stfy-body, .ls-body, .fr-body, .sa-body, .ws-body, .bp-body,
	.sdk-body {
		padding: 4px 6px !important;
		gap: 2px !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		overflow: hidden !important;
	}
	.pt-layout, .fc-layout, .ctt-layout, .wp-layout, .wq-layout,
	.bb-layout, .ttt-layout, .chess-layout, .pr-layout, .qb-layout,
	.bs-layout, .m3-layout, .stfy-layout, .ls-layout, .sa-layout,
	.ws-layout, .bp-layout, .sdk-layout {
		width: 100% !important;
		height: 100% !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: hidden !important;
		margin: 0 !important;
		gap: 0 !important;
	}
	.pt-left, .fc-left, .ctt-left, .wp-left, .wq-left, .bb-left,
	.ttt-left, .chess-left, .pr-left, .qb-left, .bs-left, .m3-left,
	.stfy-left, .ls-left, .sa-left, .ws-left, .bp-left, .sdk-left,
	.game-area, #game-container {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	/* 7. Compact Stats Topbar */
	.pt-stats, .fc-topbar, .ctt-stats, .wp-stats, .wq-stats,
	.bb-stats, .ttt-stats, .chess-stats, .pr-stats, .qb-stats,
	.ls-stats, .sa-topbar, .ws-topbar, .sdk-stats, .bs-stats, .m3-top,
	.game-stats, .quiz-header, .fr-hud {
		padding: 2px 6px !important;
		margin: 0 auto 3px auto !important;
		gap: 4px !important;
		min-height: 26px !important;
		border-radius: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		justify-content: space-around !important;
		background: var(--pv-panel-bg, rgba(0, 0, 0, 0.15)) !important;
	}
	.pt-stat-pill, .fr-hud-pill {
		font-size: 0.72rem !important;
		gap: 3px !important;
	}
	.pt-stat-pill .pt-label, .fr-hud-label {
		font-size: 0.65rem !important;
	}
	.pt-stat-pill .pt-val, .fr-hud-value {
		font-size: 0.76rem !important;
	}
	.pt-btn, #ws-undo, #ws-restart, #sa-restart, .bb-btn {
		padding: 2px 7px !important;
		font-size: 0.7rem !important;
		min-height: 22px !important;
		border-radius: 6px !important;
		line-height: 1 !important;
	}

	/* 8. Specific Game Play Boards */
	/* Water Sort */
	.ws-game-area, #ws-game-area {
		min-height: 0 !important;
		flex: 1 1 auto !important;
		max-height: calc(100% - 32px) !important;
		padding: 4px !important;
		margin: 2px 0 0 0 !important;
		gap: 6px !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		background: transparent !important;
		border: none !important;
	}
	.ws-tube-container {
		padding: 2px 1px !important;
		margin: 0 !important;
	}
	.ws-tube {
		width: 38px !important;
		height: 125px !important;
		border-width: 3px !important;
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}
	.ws-tube .ws-water-layer {
		height: 31.25px !important;
	}

	/* PuzzleTale */
	.pt-grid {
		width: min(220px, 66vmin) !important;
		height: min(220px, 66vmin) !important;
		max-width: 90% !important;
		max-height: 90% !important;
	}
	.pt-actions {
		margin-top: 4px !important;
	}
	.pt-actions .pt-btn {
		padding: 3px 10px !important;
		font-size: 0.74rem !important;
	}

	/* TicTacToe */
	.pv-ttt-board {
		grid-template-columns: repeat(var(--pv-ttt-grid-size, 3), 62px) !important;
		grid-template-rows: repeat(var(--pv-ttt-grid-size, 3), 62px) !important;
		gap: 6px !important;
	}
	.pv-ttt-cell {
		width: 62px !important;
		height: 62px !important;
		border-radius: 8px !important;
		font-size: 38px !important;
	}

	/* Chess */
	.pv-chess-board {
		width: min(230px, 64vmin) !important;
		height: min(230px, 64vmin) !important;
		border-width: 4px !important;
		margin: 0 auto !important;
	}
	.pv-chess-status {
		padding: 2px 6px !important;
		font-size: 0.72rem !important;
		margin-bottom: 2px !important;
	}
	.pv-chess-controls {
		gap: 4px !important;
	}
	.pv-chess-button {
		padding: 3px 8px !important;
		min-width: 70px !important;
		font-size: 0.7rem !important;
	}

	/* ByteSnake */
	#bs-main .bs-container {
		width: min(200px, 56vmin) !important;
		height: min(200px, 56vmin) !important;
		margin: 0 auto !important;
	}
	.pad, .bs-pad, .ctt-pad, .stk-pad {
		width: 120px !important;
		gap: 3px !important;
		margin: 2px auto 0 auto !important;
	}
	.pad button, .bs-pad button, .ctt-pad button, .stk-pad button {
		min-width: 32px !important;
		min-height: 32px !important;
		border-radius: 8px !important;
		font-size: 14px !important;
	}

	/* BrandBreaker */
	#bb-main .game-container {
		width: min(280px, 92vw) !important;
		height: min(180px, 52vh) !important;
		margin: 0 auto !important;
	}

	/* FlipCards */
	#fc-main .fc-card-grid, #fc-main .card-container, #fc-main .grid {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 5px !important;
		width: 100% !important;
		max-width: 240px !important;
		margin: 0 auto !important;
	}

	/* LuckySpin */
	.wheel-wrapper {
		max-width: min(190px, 58vmin) !important;
		margin: 0 auto !important;
	}
	#ls-spin-btn {
		padding: 4px 14px !important;
		font-size: 0.8rem !important;
		width: auto !important;
		margin: 4px auto 0 auto !important;
	}

	/* WordPuzzle & WordQuest */
	#game-board, .wp-board {
		width: min(220px, 62vmin) !important;
		height: min(220px, 62vmin) !important;
		margin: 0 auto !important;
	}

	/* PixelRunner / CatchQuest */
	#pr-container, #cq-container {
		width: min(260px, 88vw) !important;
		height: min(170px, 50vh) !important;
		margin: 0 auto !important;
	}

	/* Stop & Align */
	#sa-canvas-wrap {
		min-height: 0 !important;
		width: min(260px, 88vw) !important;
		height: min(170px, 50vh) !important;
		margin: 2px auto !important;
	}

	/* Match 3 */
	#m3-canvas, #m3-grid {
		max-width: min(210px, 60vmin) !important;
		max-height: min(210px, 60vmin) !important;
		margin: 0 auto !important;
	}
}

/* ========================================================
   Ultra-Compact (Square 320x320 & Circle 320x320 viewport)
   ======================================================== */
@media (max-height: 380px) and (max-width: 380px) {
	.pt-title, .fc-title, .ctt-title, .wp-title, .wq-title,
	.bb-title, .ttt-title, .chess-title, .pr-title, .qb-title,
	.ls-title, .fr-title, .sa-title, .ws-title, .m3-title,
	.bs-title, .stfy-title, .bp-title,
	#pv-name, #ws-title, #ttt-title {
		font-size: 0.82rem !important;
		padding: 0 20px !important;
	}
	.ws-tube {
		width: 32px !important;
		height: 95px !important;
		border-width: 2.5px !important;
		border-bottom-left-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}
	.ws-tube .ws-water-layer {
		height: 23.75px !important;
	}
	.ws-game-area, #ws-game-area {
		gap: 4px !important;
	}
	.pv-ttt-board {
		grid-template-columns: repeat(var(--pv-ttt-grid-size, 3), 52px) !important;
		grid-template-rows: repeat(var(--pv-ttt-grid-size, 3), 52px) !important;
		gap: 5px !important;
	}
	.pv-ttt-cell {
		width: 52px !important;
		height: 52px !important;
		font-size: 32px !important;
	}
	#fc-main .fc-card-grid, #fc-main .card-container, #fc-main .grid {
		max-width: 200px !important;
		gap: 4px !important;
	}
	#bb-main .game-container {
		width: min(220px, 70vw) !important;
		height: min(140px, 44vh) !important;
	}
	#sa-canvas-wrap {
		width: min(220px, 70vw) !important;
		height: min(140px, 44vh) !important;
	}
}

/* ========================================================
   Circle Viewport Device Mode
   Ensures critical elements avoid circular clip corners
   ======================================================== */
.pv-device-circle .pt-body,
.pv-device-circle .fc-body,
.pv-device-circle .ctt-body,
.pv-device-circle .wp-body,
.pv-device-circle .wq-body,
.pv-device-circle .bb-body,
.pv-device-circle .ttt-body,
.pv-device-circle .chess-body,
.pv-device-circle .pr-body,
.pv-device-circle .qb-body,
.pv-device-circle .m3-body,
.pv-device-circle .bs-body,
.pv-device-circle .stfy-body,
.pv-device-circle .ls-body,
.pv-device-circle .fr-body,
.pv-device-circle .sa-body,
.pv-device-circle .ws-body {
	padding: 12px 18px !important;
	justify-content: center !important;
	align-items: center !important;
}

.pv-device-circle .pv-corner-guide-btn {
	top: 10px !important;
	right: 22px !important;
}

.pv-device-circle .ws-tube {
	width: 30px !important;
	height: 90px !important;
}
.pv-device-circle .ws-tube .ws-water-layer {
	height: 22.5px !important;
}

/* Preserve gameplay on compact screens instead of clipping it inside a fixed card. */
html.pv-compact-mode {
	font-size: clamp(10px, min(3.6vw, 3.6vh), 15px);
}

html.pv-compact-mode body,
html.pv-compact-mode #template-container {
	height: 100% !important;
	min-height: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

html.pv-compact-mode .play-container-main {
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 0 !important;
	max-height: 100dvh !important;
	padding: 4px !important;
	margin: 0 !important;
	justify-content: flex-start !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

html.pv-compact-mode .play-container-main :is(
	.pt-card, .fc-card, .ctt-card, .wp-card, .wq-card, .bb-card, .ttt-card,
	.chess-card, .pr-card, .qb-card, .m3-card, .bs-card, .stfy-card, .ls-card,
	.fr-card, .sa-card, .ws-card, .bp-card, .sdk-card, .play-card, .pv-card
) {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	flex: 0 0 auto !important;
	justify-content: flex-start !important;
	overflow: visible !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

html.pv-compact-mode .play-container-main :is(
	.pt-body, .fc-body, .ctt-body, .wp-body, .wq-body, .bb-body, .ttt-body,
	.chess-body, .pr-body, .qb-body, .m3-body, .bs-body, .stfy-body, .ls-body,
	.fr-body, .sa-body, .ws-body, .bp-body, .sdk-body
) {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	justify-content: flex-start !important;
	gap: 0.45rem !important;
	overflow: visible !important;
}

html.pv-compact-mode .play-container-main :is(
	.pt-layout, .fc-layout, .ctt-layout, .wp-layout, .wq-layout, .bb-layout,
	.ttt-layout, .chess-layout, .pr-layout, .qb-layout, .bs-layout, .m3-layout,
	.stfy-layout, .ls-layout, .sa-layout, .ws-layout, .bp-layout, .sdk-layout, .pt-left, .fc-left,
	.ctt-left, .wp-left, .wq-left, .bb-left, .ttt-left, .chess-left, .pr-left,
	.qb-left, .bs-left, .m3-left, .stfy-left, .ls-left, .sa-left, .ws-left, .bp-left, .sdk-left,
	.game-area, #game-container
) {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	gap: 0.45rem !important;
}

html.pv-compact-mode .play-container-main :is(
	.pt-header, .fc-header, .ctt-header, .wp-header, .wq-header, .bb-header,
	.ttt-header, .chess-header, .pr-header, .qb-header, .ls-header, .fr-header,
	.sa-header, .ws-header, .sdk-header
) {
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
}

html.pv-compact-mode .play-container-main :is(
	.pt-subtitle, .fc-subtitle, .ctt-subtitle, .wp-subtitle, .wq-subtitle,
	.bb-subtitle, .ttt-subtitle, .chess-subtitle, .pr-subtitle, .qb-subtitle,
	.ls-subtitle, .fr-subtitle, .sa-subtitle, .ws-subtitle, .m3-subtitle,
	.bs-subtitle, .stfy-subtitle, .bp-subtitle, .sdk-subtitle, #pv-description,
	[id$="-description"], [id$="-subtitle"], .game-description, .game-subtitle,
	.card-subtitle, .pv-logo, #pv-logo, #fr-logo, .game-logo, .pt-logo,
	img[alt="Logo"]
) {
	display: none !important;
}

html.pv-compact-mode .play-container-main :is(
	h1, .pt-title, .fc-title, .ctt-title, .wp-title, .wq-title, .bb-title,
	.ttt-title, .chess-title, .pr-title, .qb-title, .ls-title, .fr-title,
	.sa-title, .ws-title, .m3-title, .bs-title, .stfy-title, .bp-title,
	.sdk-title, #pv-name, #ws-title, #ttt-title
) {
	font-size: clamp(0.9rem, 4vw, 1.2rem) !important;
	line-height: 1.1 !important;
	margin: 0 auto !important;
	max-width: 100% !important;
}

html.pv-compact-mode .play-container-main :is(
	.question-text, #question-text, .fr-question-text, .option-text,
	.option-button, .answer-option, .answer-button, .quiz-option
) {
	font-size: clamp(0.82rem, 3.8vw, 1rem) !important;
	line-height: 1.2 !important;
}

html.pv-compact-mode .play-container-main :is(
	.fr-question-text, #question-text, .question-text
) {
	font-size: clamp(0.95rem, 4.5vw, 1.3rem) !important;
}

html.pv-compact-mode .play-container-main :is(
	button, input, select, textarea, .pt-btn, .pv-btn, .next-button
) {
	font-size: clamp(0.78rem, 3.4vw, 0.95rem) !important;
}

html.pv-device-circle .play-container-main :is(
	h1, .pt-title, .fc-title, .ctt-title, .wp-title, .wq-title, .bb-title,
	.ttt-title, .chess-title, .pr-title, .qb-title, .ls-title, .fr-title,
	.sa-title, .ws-title, .m3-title, .bs-title, .stfy-title, .bp-title,
	.sdk-title, #pv-name, #ws-title, #ttt-title
) {
	display: none !important;
}

html.pv-device-circle :is(
	.pt-body, .fc-body, .ctt-body, .wp-body, .wq-body, .bb-body, .ttt-body,
	.chess-body, .pr-body, .qb-body, .m3-body, .bs-body, .stfy-body, .ls-body,
	.fr-body, .sa-body, .ws-body, .bp-body, .sdk-body
) {
	padding: 4px 8px !important;
}

html.pv-device-square .play-container-main :is(
	h1, .pt-title, .fc-title, .ctt-title, .wp-title, .wq-title, .bb-title,
	.ttt-title, .chess-title, .pr-title, .qb-title, .ls-title, .fr-title,
	.sa-title, .ws-title, .m3-title, .bs-title, .stfy-title, .bp-title,
	.sdk-title, #pv-name, #ws-title, #ttt-title
) {
	display: none !important;
}

html.pv-compact-mode .fr-main-container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 2px !important;
}

html.pv-compact-mode .fr-card {
	padding: 0.45rem !important;
	border-radius: 0.75rem !important;
}

html.pv-compact-mode .fr-topbar {
	margin: 0 0 0.3rem !important;
}

html.pv-compact-mode .fr-progress-wrap {
	margin: 0 0 0.35rem !important;
}

html.pv-compact-mode .fr-progress-track {
	height: 4px !important;
}

html.pv-compact-mode .fr-hud {
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	gap: 0.25rem !important;
	margin: 0 0 0.4rem !important;
}

html.pv-compact-mode .fr-hud-pill {
	gap: 0.2rem !important;
	padding: 0.25rem 0.4rem !important;
	font-size: clamp(0.68rem, 3vw, 0.82rem) !important;
}

html.pv-compact-mode .fr-hud-label,
html.pv-compact-mode .fr-hud-value {
	font-size: inherit !important;
}

html.pv-compact-mode .fr-question-card {
	padding: 0.55rem !important;
	margin: 0 0 0.45rem !important;
	border-radius: 0.75rem !important;
}

html.pv-compact-mode .fr-question-text {
	line-height: 1.2 !important;
}

html.pv-compact-mode .fr-options-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0.35rem !important;
	margin: 0 0 0.35rem !important;
}

html.pv-compact-mode .option-button {
	min-height: 44px !important;
	padding: 0.35rem !important;
	gap: 0.35rem !important;
	border-width: 1px !important;
	border-radius: 0.6rem !important;
}

html.pv-compact-mode .option-letter {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	font-size: 0.75rem !important;
}

html.pv-compact-mode .option-text {
	font-size: clamp(0.78rem, 3.6vw, 0.95rem) !important;
	line-height: 1.15 !important;
}

/* Collapse non-game controls into a compact, game-first layout. */
html.pv-compact-mode .play-container-main :is(
	.pt-layout, .fc-layout, .ctt-layout, .wp-layout, .wq-layout, .bb-layout,
	.ttt-layout, .chess-layout, .pr-layout, .qb-layout, .bs-layout, .m3-layout,
	.stfy-layout, .ls-layout, .sa-layout, .ws-layout, .bp-layout, .sdk-layout
) {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

html.pv-compact-mode .play-container-main :is(
	.pt-right, .fc-right, .ctt-right, .wp-right, .wq-right, .bb-right,
	.ttt-right, .chess-right, .pr-right, .qb-right, .bs-right, .m3-right,
	.stfy-right, .ls-right, .sa-right, .ws-right, .bp-right, .sdk-right, .sidebar, #controls-container,
	.settings-container, .pt-panel-guide, .pt-panel-title
) {
	display: none !important;
}

html:is(.pv-device-circle, .pv-device-square, .pv-device-mobile) :is(
	.play-container-main, .fr-main-container
) {
	align-items: center !important;
	justify-content: safe center !important;
	text-align: center !important;
	margin-inline: auto !important;
}

html:is(.pv-device-circle, .pv-device-square, .pv-device-mobile) #wheel-container {
	max-width: min(210px, 60vmin) !important;
}

html:is(.pv-device-circle, .pv-device-square, .pv-device-mobile) .wheel-wrapper {
	max-width: min(210px, 60vmin) !important;
}

html.pv-device-desktop #wheel-container {
	max-width: 480px !important;
}

html.pv-device-desktop .wheel-wrapper {
	max-width: 460px !important;
}

/* Byte Snake Responsive Tuning */
:is(html.pv-compact-mode, .pv-compact-mode) #bs-main .bs-layout {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

:is(html.pv-compact-mode, .pv-compact-mode) #bs-main .bs-right {
	display: none !important;
}

:is(html.pv-compact-mode, .pv-compact-mode) :is(.pad, .bs-pad, .ctt-pad, .stk-pad) {
	width: 124px !important;
	gap: 3px !important;
	margin: 4px auto 0 auto !important;
	touch-action: manipulation !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

:is(html.pv-compact-mode, .pv-compact-mode) :is(.pad button, .bs-pad button, .ctt-pad button, .stk-pad button) {
	min-width: 34px !important;
	min-height: 34px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	padding: 0 !important;
}

:is(html.pv-device-circle, .pv-device-circle) #bs-main .bs-container {
	width: min(180px, 50vmin) !important;
	height: min(180px, 50vmin) !important;
	max-height: 50vmin !important;
	margin: 0 auto !important;
}

:is(html.pv-device-square, .pv-device-square) #bs-main .bs-container {
	width: min(205px, 58vmin) !important;
	height: min(205px, 58vmin) !important;
	max-height: 58vmin !important;
	margin: 0 auto !important;
}

:is(html.pv-device-mobile, .pv-device-mobile) #bs-main .bs-container {
	width: min(240px, 66vmin) !important;
	height: min(240px, 66vmin) !important;
	max-height: 66vmin !important;
	margin: 0 auto !important;
}

:is(html.pv-device-tablet, html.pv-device-desktop) #bs-main .bs-container {
	width: min(380px, 90%) !important;
	max-height: 420px !important;
	margin: 0 auto !important;
}

/* Sudoku Compact & Watch Mode Scaling */
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-grid {
	width: min(195px, 55vmin) !important;
	height: min(195px, 55vmin) !important;
	border-width: 2px !important;
	border-radius: 8px !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-cell {
	font-size: clamp(0.68rem, 2.8vmin, 0.92rem) !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-controls-deck {
	max-width: min(215px, 64vmin) !important;
	gap: 0.25rem !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-tool-btn {
	padding: 0.2rem 0.1rem !important;
	border-radius: 6px !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-tool-label,
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-notes-badge,
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-num-rem {
	display: none !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-num-btn {
	padding: 0.22rem 0.1rem !important;
	border-radius: 6px !important;
}
:is(html.pv-compact-mode, .pv-compact-mode) .sdk-num-digit {
	font-size: 0.78rem !important;
}

:is(html.pv-device-circle, .pv-device-circle) .sdk-grid {
	width: min(155px, 46vmin) !important;
	height: min(155px, 46vmin) !important;
}
:is(html.pv-device-circle, .pv-device-circle) .sdk-controls-deck {
	max-width: min(175px, 52vmin) !important;
}

:is(html.pv-device-square, .pv-device-square) :is(
	.fr-topbar, .pt-header, .fc-header, .ctt-header, .wp-header, .wq-header,
	.bb-header, .ttt-header, .chess-header, .pr-header, .qb-header, .ls-header,
	.sa-header, .ws-header, .sdk-header, #bs-title, #m3-title, #stfy-title, #bp-title
) {
	display: none !important;
}

:is(html.pv-device-circle, .pv-device-circle) :is(
	.fr-topbar, .pt-header, .fc-header, .ctt-header, .wp-header, .wq-header,
	.bb-header, .ttt-header, .chess-header, .pr-header, .qb-header, .ls-header,
	.sa-header, .ws-header, .sdk-header, #bs-title, #m3-title, #stfy-title, #bp-title
) {
	display: none !important;
}