body {
    font-family: "Roboto", sans-serif;
    background: #2998f0 !important;
}

/* Optional: Apply Roboto to specific bootstrap classes */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
	font-family: "Jost", sans-serif;
	font-weight: 900;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Jost", sans-serif;
	font-weight: 900;
}

body.answer-incorrect,
body.answer-incorrect .modal-header {
    background: #e64f38 !important;
}
body.answer-incorrect nav button {
    border-color: #dc4933 !important;
	background: #dc4933 !important;
}
body.answer-incorrect .shape {
    color: #dc4933 !important;
}

body.answer-correct,
body.answer-correct .modal-header {
    background: #22c55f !important;
}
body.answer-correct nav button {
    border-color: #1fba59 !important;
    background: #1fba59 !important;
}
body.answer-correct .shape {
    color: #1fba59 !important;
}

.shape {
    z-index: -1;
    position: absolute;
    animation: float 230s infinite linear;
    color: #2589e2;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(15vw, 15vh) rotate(90deg);
    }
    50% {
        transform: translate(30vw, -10vh) rotate(180deg);
    }
    75% {
        transform: translate(-10vw, 30vh) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.content {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
}

.content-container {
    position: relative;
    z-index: 1;
}

.background-animation {
    position: fixed;
	z-index: -1;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}
body > a:first-of-type {
	position: fixed;
	bottom: 10px;
	left: 10px;
	opacity: 0.5;
	z-index: 999;
}
body > a:first-of-type img {
	max-width: 150px;
	width: 15vw;
}
body > a:first-of-type:hover {
	opacity: 1;
}
.quiz-card {
    background: #ffffff;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.btn-answer,
.btn-answer:hover {
    border: solid 1px #258ae261;
    background: aliceblue;
    color: #114a52;
}

.progress {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.progress-bar {
    background: linear-gradient(90deg, #4a90e2, #67b26f);
}

#countdown {
    position: relative;
    height: 40px;
    width: 40px;
}

#countdown-number {
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    font-size: 20px;
}

.btn-outline {
    border: solid 2px #fff;
    color: #fff;
}
.btn-outline:hover {
    color: #fff;
    background-color: #d8c3fa;
    border: solid 2px #fff;
    text-decoration: underline;
}
.btn {
	font-family: "Jost", sans-serif;
	text-transform: uppercase;
	font-weight: 900;
}
.btn-quiz {
	font-family: "Jost", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
.btn-answer {
	border: solid 1px #258ae261;
}

.dot1 { color: red; }
.dot2 { color: blue; }
.dot3 { color: green; }
.dot4 { color: orange; }
.dot5 { color: purple; }
.dot6 { color: pink; }
.dot7 { color: cyan; }
.dot8 { color: yellow; }
.dot1, .dot2, .dot3, .dot4, .dot5, .dot6, .dot7, .dot8 {
	font-size: 60px;
}

.btn-primary {
	--bs-btn-color: #000; /* Text color */
	--bs-btn-bg: #ff7f0e; /* Background color */
	--bs-btn-border-color: #ff7f0e; /* Border color */
	--bs-btn-hover-color: #fff; /* Text color on hover */
	--bs-btn-hover-bg: #e76a00; /* Background color on hover */
	--bs-btn-hover-border-color: #d65f00; /* Border color on hover */
	--bs-btn-focus-shadow-rgb: 255, 127, 14; /* Focus shadow color */
	--bs-btn-active-color: #fff; /* Text color when active */
	--bs-btn-active-bg: #d65f00; /* Background color when active */
	--bs-btn-active-border-color: #c65300; /* Border color when active */
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Active shadow */
	--bs-btn-disabled-color: #fff; /* Text color when disabled */
	--bs-btn-disabled-bg: #ff7f0e; /* Background color when disabled */
	--bs-btn-disabled-border-color: #ff7f0e; /* Border color when disabled */
}

.correct-answer .btn-answer {
	background-color: #22c55f !important;
	color: white !important;
}

.incorrect-answer .btn-answer {
	background-color: #dc3545 !important;
	color: white !important;
}

.answer-button:disabled {
	cursor: not-allowed;
}

.leaderboard-container {
	z-index: 1000;
}

.point-history {
	font-size: 0.875rem;
}

.leaderboard-container,
.position-fixed {
	z-index: 999;
}

.modal-backdrop {
	--bs-backdrop-bg: #000;
	--bs-backdrop-opacity: 0.3;
}

.btn-success {
	--bs-btn-bg: #22c55f;
	--bs-btn-border-color: #22c55f;
	--bs-btn-hover-bg: #1e9e4e;
	--bs-btn-hover-border-color: #1e9e4e;
	--bs-btn-active-bg: #1e9e4e;
	--bs-btn-active-border-color: #1e9e4e;
	--bs-btn-disabled-bg: #22c55f;
	--bs-btn-disabled-border-color: #22c55f;
}
.bg-bronze {
	background-color: #cd7f32;
}
.accordion-button:not(.collapsed) {
	background-color: #f8f9fa;
	color: #333;
}
.list-group-item small {
	line-height: 1.2;
}
#question {
	text-align: center;
}

:root {
	--plyr-color-main: #258ae2;
	--plyr-audio-controls-background: #f0f8ff;
	--bs-border-radius-sm: 0.5rem;
	--bs-border-radius-lg: 1rem;
	--root-scale: 1;
	--bs-border-radius: 0.5rem;
}
.main, .modal-dialog {
    zoom: var(--root-scale);
    transform-origin: center;
}
#leaderboard .card.position-fixed, #navbar {
	zoom: var(--root-scale);
}
.btn-outline-secondary {
	--bs-btn-active-bg: #2998f0 !important;
	--bs-btn-active-border-color: #2688e2;
}
.dropdown-item.active, .dropdown-item:active {
	background-color: #fff;
	color: #000;
}
.zoom .btn {
	font-size: 12px;
	font-weight: normal;;
}
.main, .modal-dialog {
    zoom: var(--root-scale);
    transform-origin: center;
}
#leaderboard .card.position-fixed, #navbar {
	zoom: var(--root-scale);
}

.rounded-20 {
	border-radius: 20px;
}
.audio-player-container {
	background-color: var(--plyr-audio-controls-background);
}
.dropdown-menu .btn:hover, .settings-scale .btn:hover {
	--bs-btn-hover-bg: #2589e2;
	--bs-btn-hover-border-color: #2589e2;
}

.history-content .btn:hover {
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: transparent;
}

.table th {
	border-top: none;
	background: #f8f9fa;
	font-weight: 600;
	color: #000;
}

.table td {
	padding: 0.5rem;
	vertical-align: middle;
}

.table tr {
	border-bottom: 1px solid #dee2e6;
}

.table tbody tr:hover {
	background-color: #f8f9fa;
}

.top-player {
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(248,249,250,0.5) 100%);
}

.ranking-badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto;
}

.ranking-badge i {
	font-size: 1.2rem;
	color: white;
	z-index: 2;
}

.ranking-badge .ranking {
	position: absolute;
	bottom: -5px;
	right: -5px;
	background: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.gold {
	background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
	box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.silver {
	background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
	box-shadow: 0 4px 8px rgba(192, 192, 192, 0.3);
}

.bronze {
	background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
	box-shadow: 0 4px 8px rgba(205, 127, 50, 0.3);
}
.ranking-number {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
}

.score-badge {
	background: #f8f9fa;
	padding: 0.4rem 1rem;
	border-radius: 20px;
	font-weight: 600;
	min-width: 60px;
	display: inline-block;
	text-align: center;
}

.score-top {
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stat-value {
	font-weight: 600;
}

.history-content {
	background: #f1f1f1;
	font-size: 0.9rem;
	height: 400px;
	overflow-y: auto;
}

.history-header {
	background: white;
}

.history-item {
	transition: background 0.2s ease;
}

.history-item:hover {
	background: #f8f9fa;
}

.history-item .undo-points {
	opacity: 0.3;
	transition: opacity 0.2s ease;
}

.history-item:hover .undo-points {
	opacity: 1;
}

@media (max-width: 992px) {
	.modal-dialog {
		max-width: 95%;
		margin: 1rem auto;
	}

	.col-lg-8 {
		border-right: none !important;
	}
}

.navbar-toggler {
	display: none;
}

@media (max-width: 768px), (max-height: 600px) {
	.navbar-toggler {
		display: block;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1031;
	}
	
	.mobile-nav {
		opacity: 0;
		visibility: hidden;
	}
	
	.mobile-nav button,
	.mobile-nav .btn-group {
		display: inline-block !important;
		margin: 0.25rem !important;
	}
}

.help-tabs .nav-link {
	border-radius: 0;
	border: none;
	border-left: 3px solid transparent;
	padding: 1rem 1.5rem;
	color: #666;
	background: transparent;
}

.help-tabs .nav-link:hover {
	background-color: rgba(0,0,0,0.05);
}

.help-tabs .nav-link.active {
	background-color: rgba(0,0,0,0.05);
	color: #0d6efd;
	border-left-color: #0d6efd;
}

.help-tabs {
	background-color: #f8f9fa;
}




@media (orientation: landscape) and (max-width: 991px) {
	.force-desktop-view .container {
		max-width: 992px !important;
	}
	
	.force-desktop-view .navbar-collapse {
		display: flex !important;
	}
	
	.force-desktop-view .navbar-toggler {
		display: none !important;
	}
	
	.force-desktop-view [class*="col-"] {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.force-desktop-view .col-lg-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
	.force-desktop-view .col-lg-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
	.force-desktop-view .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; }
	.force-desktop-view .col-lg-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
	.force-desktop-view .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
	.force-desktop-view .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
	.force-desktop-view .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
	.force-desktop-view .col-lg-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
	.force-desktop-view .col-lg-9 { flex: 0 0 75% !important; max-width: 75% !important; }
	.force-desktop-view .col-lg-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
	.force-desktop-view .col-lg-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
	.force-desktop-view .col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

.settings-control .btn {
	font-weight: normal;
}
.settings-section {
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--bs-border-color);
}

.settings-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.settings-section-title {
	color: var(--bs-gray-700);
	font-weight: 600;
}

.settings-row {
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 1rem;
	align-items: center;
}

.settings-label {
	color: var(--bs-gray-700);
}

.settings-label small {
	font-size: 0.875em;
	margin-top: 0.25rem;
}

.settings-control {
	display: flex;
	justify-content: flex-end;
}

.scale-presets {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
}

@media (max-width: 768px) {
	.settings-row {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	
	.settings-control {
		justify-content: flex-start;
	}
}
.dropdown-menu .fas {
	min-width: 20px
}
.question-blurred {
    filter: blur(6px);
    transition: filter 1s ease-out;
}
.question-blurred.reveal {
    filter: blur(0px);
}



.answers-container {
	position: relative;
	margin: 20px 0;
	padding-bottom: 20px;
}

.answers-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(240, 240, 240, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: opacity 0.3s ease;
	border-radius: 20px;
}

.answers-content {
	filter: blur(6px);
	transition: opacity 0.3s ease;
}

.answers-content.visible {
	filter: blur(0px);
}

.question-container {
	position: relative;
}

.question-blurred {
	filter: blur(8px);
	user-select: none;
	transition: filter 0.3s ease;
}

.question-blurred.reveal {
	filter: blur(0);
}

.question-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: rgba(240, 240, 240, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: opacity 0.3s ease;
	border-radius: 20px;
}

.question-text-container {
	position: relative;
}

@keyframes modalBounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-dialog.bounce {
    animation: modalBounceIn 0.5s;
}

.media-alternative .audio-player-container {
	--plyr-audio-controls-background: gold;
}

h1.title {
	text-align: center;
	font-family: "Luckiest Guy", cursive !important;
	margin: 0;
	font-size: clamp(4rem, 4vw, 6rem);

	padding: 0;
	color: white;
	text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
	0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
	0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
	-0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
}
h1.title span {
	transform: scale(0.9);
	display: inline-block;
}
h1.title span:first-child {
	color: #2a98f0;
	animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
h1.title span {
	color: #0fcaf0;
	animation: bop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
h1.title span:last-child {
	color: orange;
	animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}

@keyframes bop {
	0% {
		transform: scale(0.9);
	}
	50%,
	100% {
		transform: scale(1);
	}
}

@keyframes bopB {
	0% {
		transform: scale(0.9);
	}
	80%,
	100% {
		transform: scale(1) rotateZ(-3deg);
	}
}

input#quiz-code {
    font-family: "Jost", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 24px;
}

.timer-container {
    padding: 2rem;
}

.timer-count {
	font-size: 3.5rem;
	font-weight: bold;
	color: #000;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}