:root {
	--color-sunshine: #ffd23f;
	--color-splash: #00b0c7;
	--color-deep-sea: #006e82;
	--color-forest: #006d3c;
	--color-lagoon: #ecfbff;
	--color-night: #112031;
	--color-text: #1f2a44;
	--color-muted: #5a6a7a;
	--font-heading: 'Baloo 2', system-ui, sans-serif;
	--font-body: 'Nunito', system-ui, sans-serif;
	--radius-large: 24px;
	--radius-medium: 16px;
	--shadow-soft: 0 20px 40px rgba(17, 32, 49, 0.16);
	--shadow-card: 0 12px 24px rgba(17, 32, 49, 0.12);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: linear-gradient(180deg, #f4fff9 0%, #fffef2 100%);
	font-size: 18px; /* Increased base font size for better readability */
	line-height: 1.6;
}

img {
	max-width: 100%;
	display: block;
}

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

.container {
	width: min(1100px, 92vw);
	margin: 0 auto;
}

.top-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	border-bottom: 3px solid var(--color-sunshine);
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--font-heading);
	font-size: 1.8rem; /* Increased brand font size */
	color: var(--color-deep-sea);
}

.brand-icon {
	font-size: 2.2rem; /* Increased icon size */
}

.nav-links {
	display: flex;
	gap: 1.2rem;
	font-weight: 600;
	font-size: 1.1rem; /* Increased navigation font size */
}

.nav-links a {
	padding: 0.8rem 1.2rem; /* Increased padding for larger touch targets */
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
}

.nav-links a.active {
	background: var(--color-deep-sea);
	color: white;
}

.nav-links a:hover,
.nav-links a:focus-visible {
	background: var(--color-splash);
	color: white;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav-profile {
	font-weight: 700;
	color: var(--color-forest);
	white-space: nowrap;
	font-size: 1.1rem; /* Increased profile text size */
}

.login-toggle {
	border: none;
	padding: 0.8rem 1.4rem; /* Increased button padding */
	border-radius: 999px;
	background: var(--color-sunshine);
	color: var(--color-night);
	font-weight: 700;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 1.1rem; /* Increased button text size */
	transition: transform 0.2s ease;
}

.login-toggle:hover,
.login-toggle:focus-visible {
	transform: translateY(-2px);
}

.hero {
	position: relative;
	padding: 5.5rem 0 4rem;
	background: radial-gradient(circle at 15% 20%, rgba(0, 176, 199, 0.14), transparent 60%),
				radial-gradient(circle at 85% 10%, rgba(255, 210, 63, 0.18), transparent 50%),
				linear-gradient(180deg, #ecfbff 0%, rgba(255, 255, 255, 0.4) 60%, transparent 100%);
}

.page-hero {
	padding: 5rem 0 3rem;
	background: radial-gradient(circle at 10% 40%, rgba(0, 176, 199, 0.08), transparent 65%),
				radial-gradient(circle at 90% 20%, rgba(255, 210, 63, 0.12), transparent 55%),
				linear-gradient(180deg, #f4fff9 0%, rgba(255, 255, 255, 0.7) 100%);
}

.page-hero__content {
	display: grid;
	gap: 0.8rem;
	text-align: center;
}

.page-hero__content h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.8rem, 5vw, 3.6rem); /* Increased heading size */
	margin: 0;
	color: var(--color-night);
}

.page-hero__content p {
	margin: 0;
	font-size: 1.3rem; /* Increased paragraph size */
}

.hero-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2.5rem;
	align-items: center;
}

.hero-text h1 {
	font-family: var(--font-heading);
	font-size: clamp(3rem, 4vw, 3.8rem); /* Increased main heading size */
	line-height: 1.1;
	color: var(--color-night);
	margin-bottom: 1rem;
}

.hero-text p {
	max-width: 32rem;
	font-size: 1.2rem; /* Increased paragraph size */
	line-height: 1.6;
}

.hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--color-forest);
	font-size: 1rem; /* Increased kicker text size */
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.btn-primary,
.btn-secondary {
	border: none;
	cursor: pointer;
	font-weight: 700;
	border-radius: 999px;
	padding: 1.2rem 2rem; /* Increased button padding */
	font-family: var(--font-heading);
	font-size: 1.2rem; /* Increased button font size */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-height: 3rem; /* Minimum height for better touch targets */
}

.btn-primary {
	background: linear-gradient(120deg, var(--color-splash), var(--color-deep-sea));
	color: white;
	box-shadow: var(--shadow-card);
}

.btn-secondary {
	background: white;
	border: 2px solid var(--color-splash);
	color: var(--color-deep-sea);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
	transform: translateY(-3px);
}

.login-card {
	background: white;
	padding: 2.8rem; /* Increased login card padding */
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
}

.login-card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 0% 0%, rgba(0, 176, 199, 0.18), transparent 55%),
				radial-gradient(circle at 100% 100%, rgba(255, 210, 63, 0.2), transparent 60%);
	opacity: 0.9;
}

.login-card h2,
.login-card p,
.login-card form,
.login-card .login-status {
	position: relative;
	z-index: 1;
}

.login-card label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
	font-size: 1.1rem; /* Increased label font size */
}

.login-card input {
	width: 100%;
	border-radius: 12px;
	border: 2px solid rgba(17, 32, 49, 0.1);
	padding: 1rem 1.3rem; /* Increased input padding */
	font-size: 1.2rem; /* Increased input font size */
	font-family: var(--font-body);
	margin-bottom: 1.2rem;
	min-height: 3.2rem; /* Minimum height for better accessibility */
	transition: border 0.2s ease, box-shadow 0.2s ease;
}

.login-card input:focus-visible {
	outline: none;
	border-color: var(--color-splash);
	box-shadow: 0 0 0 4px rgba(0, 176, 199, 0.18);
}

.login-status {
	display: grid;
	gap: 0.75rem;
	text-align: center;
}

.welcome {
	font-weight: 700;
	color: var(--color-forest);
}

.progress-summary {
	position: relative;
	z-index: 1;
}

.progress-summary p {
	font-size: 1.1rem;
	margin: 0.8rem 0;
	font-weight: 600;
}

.progress-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: 1.5rem;
}

.progress-buttons .btn-primary,
.progress-buttons .btn-secondary {
	width: 100%;
	padding: 1rem;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
}

.progress-buttons .btn-primary {
	background: var(--color-splash);
	color: white;
}

.progress-buttons .btn-primary:hover {
	background: var(--color-deep-sea);
	transform: translateY(-2px);
}

.progress-buttons .btn-secondary {
	background: transparent;
	color: var(--color-deep-sea);
	border: 2px solid var(--color-deep-sea);
}

.progress-buttons .btn-secondary:hover {
	background: var(--color-deep-sea);
	color: white;
	transform: translateY(-2px);
}

.hero-bubbles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 12% 80%, rgba(0, 176, 199, 0.12), transparent 45%),
				radial-gradient(circle at 85% 65%, rgba(0, 109, 60, 0.12), transparent 50%);
	mix-blend-mode: multiply;
}

.section-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.section-kicker {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-forest);
	font-size: 1rem; /* Increased section kicker font size */
	margin-bottom: 0.4rem;
}

.section-header h2 {
	font-family: var(--font-heading);
	font-size: clamp(2.4rem, 3vw, 3.2rem); /* Increased section header size */
	margin-bottom: 1rem;
}

.highlight-grid,
.video-showcase,
.games,
.activities,
.scores {
	padding: 4.5rem 0;
}

.mission-links {
	padding: 4.5rem 0;
}

.mission-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.6rem;
}

.mission-card {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* Increased gap between elements */
	background: white;
	border-radius: var(--radius-medium);
	padding: 2.2rem; /* Increased card padding */
	box-shadow: var(--shadow-card);
	color: inherit;
	border: 3px solid transparent;
	transition: transform 0.2s ease, border 0.2s ease;
}

.mission-card:hover,
.mission-card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--color-sunshine);
}

.mission-card h3 {
	font-family: var(--font-heading);
	font-size: 1.6rem; /* Increased mission card title size */
	margin: 0 0 0.8rem 0;
	color: var(--color-deep-sea);
}

.mission-card p {
	font-size: 1.1rem; /* Increased mission card text size */
	line-height: 1.6;
	margin: 0 0 1rem 0;
}

.mission-link {
	font-weight: 700;
	color: var(--color-deep-sea);
	font-size: 1.1rem; /* Increased link text size */
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.8rem;
}

.info-card {
	background: white;
	border-radius: var(--radius-medium);
	padding: 2.4rem; /* Increased info card padding */
	box-shadow: var(--shadow-card);
	border: 3px solid transparent;
	transition: transform 0.2s ease, border 0.2s ease;
}

.info-card:hover,
.info-card:focus-within {
	transform: translateY(-6px);
	border-color: var(--color-sunshine);
}

.info-card h3 {
	font-family: var(--font-heading);
	font-size: 1.8rem; /* Increased info card heading size */
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--color-deep-sea);
}

.info-card p {
	font-size: 1.1rem; /* Added info card paragraph size */
	line-height: 1.6;
}

.info-card ul {
	font-size: 1.1rem; /* Increased list text size */
}

.info-card ul {
	padding-left: 1.4rem; /* Increased list padding */
	margin: 0;
}

.video-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.video-card {
	background: white;
	border-radius: var(--radius-medium);
	padding: 2rem; /* Increased video card padding */
	box-shadow: var(--shadow-card);
}

.video-card h3 {
	font-family: var(--font-heading);
	font-size: 1.6rem; /* Added video card title size */
	margin-bottom: 1rem;
	color: var(--color-deep-sea);
}

.video-card p {
	font-size: 1.1rem; /* Added video card text size */
	line-height: 1.6;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.video-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.game-wrapper,
.activity-wrapper {
	background: white;
	border-radius: var(--radius-large);
	padding: 3rem; /* Increased game/activity wrapper padding */
	box-shadow: var(--shadow-soft);
	border: 4px solid var(--color-splash);
}

.game-header,
.activity-header {
	text-align: center;
	margin-bottom: 1.8rem;
}

.quiz-body {
	display: grid;
	gap: 1.5rem;
}

.quiz-card {
	background: var(--color-lagoon);
	border-radius: var(--radius-medium);
	padding: 1.8rem;
}

.quiz-question {
	margin-bottom: 1rem;
}

.quiz-options {
	display: grid;
	gap: 0.8rem;
}

.quiz-options label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: white;
	padding: 0.9rem 1rem;
	border-radius: 12px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border 0.2s ease, transform 0.2s ease;
}

.quiz-options input:focus-visible + span,
.quiz-options label:hover {
	border-color: var(--color-deep-sea);
	transform: translateY(-2px);
}

.quiz-options input {
	margin-top: 0.2rem;
}

.quiz-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.quiz-progress {
	font-weight: 700;
	color: var(--color-deep-sea);
}

.quiz-warning {
	color: #d35400;
}

.quiz-result {
	text-align: center;
}

.match-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.match-card {
	background: var(--color-lagoon);
	border-radius: var(--radius-medium);
	padding: 1.6rem;
}

.match-card h4 {
	margin-top: 0;
}

.match-card select {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.65rem 0.8rem;
	border-radius: 10px;
	border: 2px solid transparent;
	font-family: var(--font-body);
	font-size: 0.95rem;
}

.match-card select:focus-visible {
	outline: none;
	border-color: var(--color-deep-sea);
	box-shadow: 0 0 0 3px rgba(0, 176, 199, 0.2);
}

.activity-footer {
	margin-top: 1.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.activity-feedback {
	font-weight: 700;
	color: var(--color-forest);
}

.scores-panel {
	background: white;
	border-radius: var(--radius-large);
	padding: 2.5rem;
	box-shadow: var(--shadow-soft);
	border: 4px solid var(--color-sunshine);
	display: grid;
	gap: 2rem;
}

.scores-summary {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.scores-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.scores-table th,
.scores-table td {
	padding: 0.9rem 1rem;
	border-bottom: 2px solid rgba(17, 32, 49, 0.08);
	text-align: left;
}

.scores-table thead {
	background: var(--color-lagoon);
}

.site-footer {
	background: var(--color-night);
	color: white;
	padding: 2rem 0;
}

.footer-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.back-to-top {
	color: var(--color-sunshine);
	font-weight: 700;
}

.login-modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(17, 32, 49, 0.6);
	padding: 1.5rem;
}

.login-modal[hidden] {
	display: none;
}

.login-modal-content {
	background: white;
	border-radius: var(--radius-large);
	padding: 2.8rem; /* Increased modal padding */
	width: min(480px, 90vw); /* Increased modal width */
	position: relative;
	box-shadow: var(--shadow-soft);
	font-size: 1.1rem; /* Increased modal text size */
}

.login-modal-content h2 {
	font-size: 2rem; /* Increased modal heading size */
	margin-bottom: 1rem;
}

.login-modal-content p {
	font-size: 1.1rem; /* Increased modal paragraph size */
	line-height: 1.6;
}

.modal-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	border: none;
	background: transparent;
	font-size: 1.8rem; /* Increased close button size */
	cursor: pointer;
	width: 2.5rem; /* Larger touch target */
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 768px) {
	.nav-links {
		display: none;
	}

	.top-nav {
		padding-inline: 1rem;
	}

	.hero {
		padding-top: 4.5rem;
	}
}

@media (max-width: 600px) {
	.scores-panel,
	.game-wrapper,
	.activity-wrapper {
		padding: 1.8rem;
	}

	.quiz-card,
	.match-card {
		padding: 1.2rem;
	}

	.footer-content {
		flex-direction: column;
		text-align: center;
	}
}

@media print {
	body {
		background: white;
		margin: 0;
		padding: 0;
	}

	.top-nav,
	.hero,
	.video-showcase,
	.games,
	.activities,
	.site-footer,
	.login-modal,
	.nav-actions,
	.back-to-top {
		display: none !important;
	}

	/* Show page hero for scores page */
	.page-hero {
		display: block !important;
		padding: 1rem 0;
		page-break-inside: avoid;
	}

	.page-hero h1 {
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}

	.page-hero p {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.scores {
		padding-top: 0;
		padding-bottom: 1rem;
	}

	.scores-panel {
		border: none;
		box-shadow: none;
		background: white;
	}

	.scores-summary {
		margin-bottom: 1rem;
		page-break-inside: avoid;
	}

	.scores-summary h3 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.scores-table {
		width: 100%;
		border-collapse: collapse;
		page-break-inside: avoid;
	}

	.scores-table th,
	.scores-table td {
		border: 1px solid #ddd;
		padding: 0.5rem;
		text-align: left;
	}

	.scores-table th {
		background-color: #f5f5f5;
		font-weight: bold;
	}

	/* Hide print button in print view */
	#printScores {
		display: none !important;
	}

	/* Ensure proper page margins */
	@page {
		margin: 1in;
	}
}

/* Enhanced Video Cards with Thumbnails */
.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio for proper video proportions */
	margin-bottom: 1rem;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	overflow: hidden;
	border-radius: 18px;
	display: block;
}

.video-thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	display: block;
	background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

/* Loading placeholder for images */
.video-thumbnail::before {
	content: "📹";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	color: var(--color-splash);
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.video-thumbnail::after {
	content: "Loading...";
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.9rem;
	color: #666;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.video-thumbnail.loaded::before,
.video-thumbnail.loaded::after {
	opacity: 0;
}

.video-card:hover .video-thumbnail img {
	transform: scale(1.05);
}

.play-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
}

.video-card:hover .play-overlay,
.video-thumbnail:hover .play-overlay {
	opacity: 1;
}

.play-button {
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
	color: var(--color-deep-sea);
	transition: all 0.3s ease;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
	border: 3px solid rgba(255, 255, 255, 0.8);
}

.play-button:hover {
	transform: scale(1.15);
	background: white;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, var(--color-splash), var(--color-deep-sea));
	color: white;
	border: none;
	border-radius: 15px;
	font-weight: bold;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 1rem;
	font-family: var(--font-heading);
}

.view-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 176, 199, 0.4);
}

/* Video Modal Styles */
.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(5px);
	padding: 2rem;
}

.video-modal[hidden] {
	display: none;
}

.video-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.video-modal-content {
	position: relative;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	max-width: 90vw;
	max-height: 90vh;
	width: 1000px;
	animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(-50px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.video-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2rem;
	background: linear-gradient(135deg, var(--color-splash), var(--color-deep-sea));
	color: white;
}

.video-modal-header h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

.video-modal-header .modal-close {
	position: static;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.5rem;
	transition: all 0.3s ease;
}

.video-modal-header .modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.video-modal-body {
	padding: 0;
}

.video-embed-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	background: #000;
}

.video-embed-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.video-modal {
		padding: 1rem;
	}
	
	.video-modal-content {
		width: 100%;
		max-width: none;
	}
	
	.video-modal-header {
		padding: 1rem 1.5rem;
	}
	
	.video-modal-header h3 {
		font-size: 1.2rem;
	}
	
	.play-button {
		width: 50px;
		height: 50px;
		font-size: 1.5rem;
	}
}

/* Enhanced Lessons Styling */
.lesson-section {
	background: white;
	border-radius: var(--radius-large);
	padding: 2.5rem;
	margin: 2rem 0;
	box-shadow: var(--shadow-card);
	border-left: 6px solid var(--color-splash);
}

.lesson-title {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--color-deep-sea);
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lesson-grid {
	display: grid;
	gap: 2rem;
}

.lesson-content h4 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--color-forest);
	margin: 1.5rem 0 1rem 0;
	border-bottom: 2px solid var(--color-lagoon);
	padding-bottom: 0.5rem;
}

/* Visual Examples Styling */
.visual-examples, .virtual-examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.example-item {
	text-align: center;
}

.example-image {
	background: #f8f9fa;
	border: 3px solid #e9ecef;
	border-radius: var(--radius-medium);
	padding: 1.5rem;
	margin-bottom: 1rem;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
}

/* Poster Example */
.poster-example {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	text-align: center;
}

.poster-header {
	font-size: 0.9rem;
	opacity: 0.9;
	margin-bottom: 0.5rem;
}

.poster-title {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0.5rem 0;
}

.poster-subtitle {
	font-size: 1.2rem;
	margin: 0.5rem 0;
}

.poster-details {
	font-size: 1rem;
	margin-top: 1rem;
	opacity: 0.9;
}

/* Comic Example */
.comic-example {
	background: #fff;
	display: flex;
	gap: 0.5rem;
}

.comic-panel {
	flex: 1;
	background: #f0f0f0;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
}

.comic-character {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.speech-bubble {
	background: white;
	border: 2px solid #333;
	border-radius: 20px;
	padding: 0.5rem;
	position: relative;
	font-size: 0.9rem;
}

.speech-bubble::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 20px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top-color: #333;
}

/* Website Example */
.website-example {
	background: white;
}

.website-header {
	background: var(--color-splash);
	color: white;
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 0.8rem;
	margin: -1.5rem -1.5rem 1rem -1.5rem;
	border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

.nav-item {
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
	font-size: 0.9rem;
}

.nav-item.active {
	background: rgba(255, 255, 255, 0.3);
}

.website-content h5 {
	margin: 1rem 0;
	font-size: 1.2rem;
}

.website-btn {
	background: var(--color-sunshine);
	color: var(--color-text);
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	margin: 0.3rem;
	font-size: 0.9rem;
	cursor: pointer;
}

/* Game Example */
.game-example {
	background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
	color: white;
}

.game-ui {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
	font-weight: bold;
}

.game-action {
	text-align: center;
}

.game-character {
	font-size: 3rem;
	margin: 1rem 0;
}

.game-instruction {
	background: rgba(0, 0, 0, 0.3);
	padding: 0.5rem;
	border-radius: 8px;
}

/* Detective Skills Lists */
.detective-skills, .critical-questions {
	list-style: none;
	padding: 0;
}

.detective-skills li, .critical-questions li {
	background: var(--color-lagoon);
	margin: 0.8rem 0;
	padding: 1rem;
	border-radius: var(--radius-medium);
	border-left: 4px solid var(--color-splash);
}

.detective-skills li strong, .critical-questions li strong {
	color: var(--color-deep-sea);
}

/* Analysis Examples */
.analysis-examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.analysis-card {
	background: #f8f9fa;
	border-radius: var(--radius-medium);
	padding: 1.5rem;
	border: 2px solid #e9ecef;
}

.analysis-card h5 {
	font-family: var(--font-heading);
	color: var(--color-forest);
	margin-bottom: 1rem;
}

.design-grid {
	display: grid;
	gap: 0.8rem;
}

.color-example {
	padding: 0.8rem;
	border-radius: 8px;
	color: white;
	font-weight: bold;
	text-align: center;
}

.color-example.red { background: #dc3545; }
.color-example.blue { background: #0d6efd; }
.color-example.green { background: #198754; }
.color-example.yellow { background: #ffc107; color: #333; }

/* Missions Grid */
.missions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.mission-card {
	background: white;
	border-radius: var(--radius-medium);
	padding: 1.5rem;
	text-align: center;
	box-shadow: var(--shadow-card);
	border-top: 4px solid var(--color-sunshine);
	transition: transform 0.3s ease;
}

.mission-card:hover {
	transform: translateY(-5px);
}

.mission-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.mission-card h5 {
	font-family: var(--font-heading);
	color: var(--color-deep-sea);
	margin: 1rem 0;
}

.mission-tip {
	background: var(--color-lagoon);
	padding: 0.8rem;
	border-radius: 8px;
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--color-deep-sea);
}

/* Toolkit Summary */
.toolkit-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	background: var(--color-lagoon);
	padding: 2rem;
	border-radius: var(--radius-large);
}

.toolkit-column h5 {
	font-family: var(--font-heading);
	color: var(--color-deep-sea);
	margin-bottom: 1rem;
}

.toolkit-column ul {
	list-style: none;
	padding: 0;
}

.toolkit-column li {
	padding: 0.4rem 0;
	color: var(--color-text);
	font-size: 0.95rem;
}

.toolkit-column li::before {
	content: '✓ ';
	color: var(--color-forest);
	font-weight: bold;
}

/* Lesson Footer */
.lesson-footer {
	background: linear-gradient(135deg, var(--color-deep-sea), var(--color-splash));
	color: white;
	padding: 2.5rem;
	border-radius: var(--radius-large);
	text-align: center;
	margin-top: 3rem;
}

.next-steps h4 {
	font-family: var(--font-heading);
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.lesson-nav-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.lesson-nav-buttons .btn-primary,
.lesson-nav-buttons .btn-secondary {
	padding: 0.8rem 1.5rem;
	font-size: 1rem;
	border-radius: var(--radius-medium);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.lesson-nav-buttons .btn-primary {
	background: var(--color-sunshine);
	color: var(--color-text);
}

.lesson-nav-buttons .btn-secondary {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.lesson-nav-buttons a:hover {
	transform: translateY(-2px);
}

/* Responsive Design for Lessons */
@media (max-width: 768px) {
	.lesson-section {
		padding: 1.5rem;
	}
	
	.lesson-title {
		font-size: 1.5rem;
	}
	
	.visual-examples, .virtual-examples {
		grid-template-columns: 1fr;
	}
	
	.missions-grid {
		grid-template-columns: 1fr;
	}
	
	.toolkit-summary {
		grid-template-columns: 1fr;
		padding: 1.5rem;
	}
	
	.lesson-nav-buttons {
		flex-direction: column;
		align-items: center;
	}
	
	.comic-example {
		flex-direction: column;
	}
}