/**
 * main.css - Varta FM Theme Design System
 * Colorful, rounded, cartoonish, 3D-pop styled, responsive, mobile-first CSS.
 */

:root {
	--color-yellow: #FFD166;
	--color-skyblue: #4EA8DE;
	--color-orange: #FF9F1C;
	--color-green: #06D6A0;
	--color-purple: #8338EC;
	--color-pink: #FF70A6;
	--color-white: #FFFFFF;
	--color-bg: #FFFDF9;
	--color-dark: #2D3142;
	--color-gray: #F4F5F6;
	
	--font-kids: 'Fredoka', 'Baloo Bhai 2', 'Nunito', sans-serif;
	
	--shadow-yellow: 0 8px 0 #E0A926;
	--shadow-skyblue: 0 8px 0 #3A8BB7;
	--shadow-orange: 0 8px 0 #D17F0F;
	--shadow-green: 0 8px 0 #05B385;
	--shadow-purple: 0 8px 0 #6C22D0;
	--shadow-pink: 0 8px 0 #E2568D;
	--shadow-white: 0 8px 0 #E0DED7;
}

/* Reset & Global */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background-color: var(--color-bg);
	color: var(--color-dark);
	font-family: var(--font-kids);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}
a {
	color: var(--color-purple);
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}
a:hover {
	color: var(--color-orange);
}

/* Animations */
@keyframes float-cloud {
	0% { transform: translateX(-150px) translateY(0); }
	50% { transform: translateX(50vw) translateY(-20px); }
	100% { transform: translateX(100vw) translateY(0); }
}
@keyframes sway-balloon {
	0%, 100% { transform: translateY(0) rotate(3deg); }
	50% { transform: translateY(-15px) rotate(-3deg); }
}
@keyframes bounce-mascot {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@keyframes pop-effect {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Decorative Sky Elements */
.sky-background-decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
.cloud {
	position: absolute;
	color: rgba(255,255,255,0.9);
	font-size: 80px;
	text-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.cloud-1 { top: 40px; animation: float-cloud 45s linear infinite; }
.cloud-2 { top: 160px; animation: float-cloud 60s linear infinite reverse; }
.cloud-3 { top: 280px; opacity: 0.7; animation: float-cloud 35s linear infinite; }
.balloon {
	position: absolute;
	font-size: 60px;
	filter: drop-shadow(0 6px 0 rgba(0,0,0,0.05));
	animation: sway-balloon 8s ease-in-out infinite;
}
.balloon-1 { right: 8%; top: 120px; animation-delay: 1s; }
.balloon-2 { left: 5%; top: 200px; animation-delay: 3s; }

/* Grid Containers */
.section-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px;
}
.section-skyblue {
	background: var(--color-skyblue);
	border-top: 8px solid var(--color-dark);
	border-bottom: 8px solid var(--color-dark);
}
.section-yellow {
	background: var(--color-yellow);
	border-top: 8px solid var(--color-dark);
	border-bottom: 8px solid var(--color-dark);
}
.festival-swiper {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.kids-grid {
	display: grid;
	gap: 30px;
	margin-top: 30px;
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }

/* Cartoon Titles */
.section-title {
	font-size: 32px;
	text-align: center;
	font-weight: 800;
	text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,0.05);
	margin-bottom: 10px;
}
.section-subtitle {
	text-align: center;
	color: #666;
	font-size: 18px;
	margin-bottom: 30px;
}
.text-purple { color: var(--color-purple); }
.text-orange { color: var(--color-orange); }
.text-green { color: var(--color-green); }
.text-white { color: var(--color-white); }

/* Section Header & View All Button Layout */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}
.section-header .section-title {
	margin-bottom: 0;
	text-align: left;
}
.view-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 12px;
	border: 3px solid var(--color-dark);
	box-shadow: 0 4px 0 var(--color-dark);
	transition: all 0.1s ease;
	cursor: pointer;
	text-decoration: none;
}
.view-all-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--color-dark);
}
.view-all-btn:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--color-dark);
}

/* Rounded Card pop style */
.kids-card {
	background: var(--color-white);
	border: 6px solid var(--color-dark);
	border-radius: 24px;
	box-shadow: 0 10px 0 var(--color-dark);
	overflow: hidden;
	transition: all 0.2s ease-in-out;
	display: flex;
	flex-direction: column;
	position: relative;
}
.kids-card.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 0 var(--color-dark);
}
.card-image-wrap {
	position: relative;
	height: 200px;
	background: var(--color-gray);
	overflow: hidden;
	border-bottom: 6px solid var(--color-dark);
}
.card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #FFFFFF;
	transition: transform 0.2s ease-in-out;
}
.card-hover:hover .card-image {
	transform: scale(1.04);
}
.card-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	background: var(--color-purple);
	color: #fff;
	padding: 5px 15px;
	border-radius: 50px;
	font-weight: bold;
	font-size: 14px;
	border: 3px solid var(--color-dark);
}
.age-badge { background: var(--color-pink); }
.card-content {
	padding: 25px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.card-meta {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
	font-weight: bold;
}
.card-title {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 12px;
	line-height: 1.4;
}
.card-excerpt {
	color: #555;
	font-size: 15px;
	margin-bottom: 20px;
	flex: 1;
}

/* Kids Buttons */
.btn-kids, .card-btn {
	display: inline-block;
	font-weight: 800;
	text-align: center;
	padding: 10px 25px;
	border-radius: 50px;
	border: 4px solid var(--color-dark);
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	font-size: 16px;
}
.btn-kids:active, .card-btn:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--color-dark) !important;
}
.btn-yellow, .card-btn {
	background: var(--color-yellow);
	box-shadow: var(--shadow-yellow);
	color: var(--color-dark);
}
.btn-skyblue {
	background: var(--color-skyblue);
	box-shadow: var(--shadow-skyblue);
	color: #fff;
}
.btn-orange {
	background: var(--color-orange);
	box-shadow: var(--shadow-orange);
	color: #fff;
}
.btn-green {
	background: var(--color-green);
	box-shadow: var(--shadow-green);
	color: #fff;
}
.btn-purple {
	background: var(--color-purple);
	box-shadow: var(--shadow-purple);
	color: #fff;
}
.btn-pink {
	background: var(--color-pink);
	box-shadow: var(--shadow-pink);
	color: #fff;
}
.btn-white {
	background: var(--color-white);
	box-shadow: var(--shadow-white);
	color: var(--color-dark);
}

/* Colored Panels */
.card-yellow { background: var(--color-yellow); border: 6px solid var(--color-dark); box-shadow: var(--shadow-yellow); border-radius:24px; color: var(--color-dark); }
.card-skyblue { background: var(--color-skyblue); border: 6px solid var(--color-dark); box-shadow: var(--shadow-skyblue); border-radius:24px; color:#fff; }
.card-orange { background: var(--color-orange); border: 6px solid var(--color-dark); box-shadow: var(--shadow-orange); border-radius:24px; color:#fff; }
.card-green { background: var(--color-green); border: 6px solid var(--color-dark); box-shadow: var(--shadow-green); border-radius:24px; color:#fff; }
.card-purple { background: var(--color-purple); border: 6px solid var(--color-dark); box-shadow: var(--shadow-purple); border-radius:24px; color:#fff; }
.card-pink { background: var(--color-pink); border: 6px solid var(--color-dark); box-shadow: var(--shadow-pink); border-radius:24px; color:#fff; }
.card-white { background: var(--color-white); border: 6px solid var(--color-dark); box-shadow: 0 8px 0 var(--color-dark); border-radius:24px; }
.card-purple a{
	color: #fff;
}
.btn-orange:hover {
    color: #FFD166;
}
/* HEADER DESIGN */
.kids-header {
	background: var(--color-white);
	border-bottom: 8px solid var(--color-dark);
	padding: 15px 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
/* Adjust sticky header top offset when WordPress Admin Bar is visible */
.admin-bar .kids-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .kids-header {
		top: 46px;
	}
}
.kids-header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
/* Text Logo */
.kids-text-logo {
	font-size: 28px;
	font-weight: 900;
	display: flex;
	gap: 2px;
}
.letter {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 8px;
	border: 3px solid var(--color-dark);
	box-shadow: 0 4px 0 var(--color-dark);
}
.letter-1 { background: var(--color-yellow); color: #E07D38; }
.letter-2 { background: var(--color-skyblue); color:#fff; }
.letter-3 { background: var(--color-orange); color:#fff; }
.letter-4 { background: var(--color-green); color:#fff; }
.letter-5 { background: var(--color-purple); color:#fff; }
.letter-6 { background: var(--color-pink); color:#fff; }
.kids-logo-img {
	max-height: 60px;
}

/* Nav Menu */
.kids-navigation {
	display: flex;
	align-items: center;
}
.menu-primary-container {
	width: 100%;
}
.menu-primary-container ul, ul#primary-menu {
	display: flex;
	list-style: none;
	gap: 10px;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
	align-items: center;
}
.menu-primary-container ul li, ul#primary-menu li {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.menu-primary-container ul li a, ul#primary-menu li a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 14px;
	color: var(--color-dark) !important;
	padding: 8px 14px;
	border-radius: 14px;
	border: 3px solid var(--color-dark) !important;
	box-shadow: 0 4px 0 var(--color-dark);
	background: var(--color-white);
	white-space: nowrap !important;
	transition: all 0.1s ease;
	line-height: 1.2;
}
.menu-primary-container ul li a i, ul#primary-menu li a i {
	font-size: 15px;
	margin: 0;
}

/* Individual Cartoon Colors for Menu Items */
.menu-primary-container ul li:nth-child(1) a, ul#primary-menu li:nth-child(1) a { background: var(--color-yellow) !important; }
.menu-primary-container ul li:nth-child(2) a, ul#primary-menu li:nth-child(2) a { background: var(--color-skyblue) !important; color: #fff !important; }
.menu-primary-container ul li:nth-child(3) a, ul#primary-menu li:nth-child(3) a { background: var(--color-orange) !important; color: #fff !important; }
.menu-primary-container ul li:nth-child(4) a, ul#primary-menu li:nth-child(4) a { background: var(--color-green) !important; color: #fff !important; }
.menu-primary-container ul li:nth-child(5) a, ul#primary-menu li:nth-child(5) a { background: var(--color-purple) !important; color: #fff !important; }
.menu-primary-container ul li:nth-child(6) a, ul#primary-menu li:nth-child(6) a { background: var(--color-pink) !important; color: #fff !important; }
.menu-primary-container ul li:nth-child(7) a, ul#primary-menu li:nth-child(7) a { background: var(--color-white) !important; color: var(--color-dark) !important; }

/* Hover and active animations */
.menu-primary-container ul li a:hover, ul#primary-menu li a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--color-dark);
}
.menu-primary-container ul li a:active, ul#primary-menu li a:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--color-dark);
}
.menu-toggle { display: none; }

/* Header Search */
.search-input-wrap {
	position: relative;
	display: flex;
	border: 4px solid var(--color-dark);
	border-radius: 50px;
	overflow: hidden;
	background: #fff;
}
.search-field {
	padding: 10px 20px;
	font-size: 15px;
	border: 0;
	outline: none;
	width: 240px;
	font-family: var(--font-kids);
}
.search-submit {
	background: var(--color-orange);
	border: 0;
	border-left: 4px solid var(--color-dark);
	padding: 0 15px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
}
.kids-search-box { position: relative; }
.kids-ajax-search-results {
	position: absolute;
	top: 50px;
	right: 0;
	width: 320px;
	background: #fff;
	border: 4px solid var(--color-dark);
	border-radius: 18px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	padding: 10px;
	z-index: 110;
}
.search-results-list { list-style:none; }
.search-results-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-bottom: 2px dashed #eee;
}
.search-results-list li:last-child { border:0; }
.search-results-list li img {
	width: 45px;
	height: 45px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid var(--color-dark);
}
.search-result-info h4 { font-size:14px; font-weight:800; }
.search-result-info span { font-size:11px; color:#777; }

/* HERO BANNER */
.kids-hero {
	background: var(--color-white);
	border-bottom: 8px solid var(--color-dark);
	padding: 80px 20px 100px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero-content {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.hero-headline {
	font-size: 45px;
	font-weight: 900;
	color: var(--color-purple);
	line-height: 1.3;
	margin-bottom: 20px;
	text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.06);
}
.hero-subheading {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-orange);
	margin-bottom: 40px;
}
.hero-ctas {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.hero-ctas .btn-kids {
	font-size: 18px;
	padding: 12px 35px;
}
.hero-mascots {
	position: absolute;
	bottom: 20px;
	width: 100%;
	left: 0;
	display: flex;
	justify-content: space-around;
	padding: 0 10%;
	font-size: 50px;
	pointer-events: none;
}
.mascot-monkey { animation: bounce-mascot 3.5s ease-in-out infinite; }
.mascot-elephant { animation: bounce-mascot 4.5s ease-in-out infinite 0.5s; }
.mascot-lion { animation: bounce-mascot 3s ease-in-out infinite 1s; }
.mascot-rabbit { animation: bounce-mascot 4s ease-in-out infinite 1.5s; }

/* CATEGORIES */
.categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
	margin-top: 30px;
}
.cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 5px solid var(--color-dark);
	border-radius: 20px;
	text-align: center;
	transition: all 0.2s ease-in-out;
	position: relative;
}
.cat-card.card-yellow { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card.card-skyblue { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card.card-orange { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card.card-green { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card.card-purple { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card.card-pink { box-shadow: 0 6px 0 var(--color-dark); }
.cat-card:hover {
	transform: translateY(-5px);
}
.cat-icon { font-size: 40px; margin-bottom: 10px; }
.cat-card h3 { font-size: 18px; font-weight: 800; color: var(--color-dark); }

/* CHARACTERS */
.characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 20px;
	margin-top: 30px;
}
.char-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	border: 5px solid var(--color-dark);
	border-radius: 20px;
	box-shadow: 0 6px 0 var(--color-dark);
}
.char-img { font-size: 50px; margin-bottom: 5px; }
.char-card h4 { font-size: 14px; font-weight: bold; color: var(--color-dark); }

/* Split Cards */
.mini-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	margin-bottom: 20px;
}
.mini-icon { font-size: 35px; }
.mini-body h4 { font-size: 18px; font-weight:800; }
.mini-body span { font-size: 13px; opacity:0.8; }

/* Parents Banner */
.parents-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px;
}
.parents-banner-content { max-width: 70%; }
.parents-banner-content h2 { font-size: 28px; margin-bottom: 10px; font-weight:800; }
.parents-banner-vector { font-size: 80px; }
.badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 800;
	border: 2px solid var(--color-dark);
	margin-bottom: 10px;
}
.badge-purple { background: var(--color-purple); color:#fff; }
.badge-orange { background: var(--color-orange); color:#fff; }
.badge-skyblue { background: var(--color-skyblue); color:#fff; }
.badge-green { background: var(--color-green); color:#fff; }
.badge-white { background: #fff; color:var(--color-dark); }

/* FOOTER DESIGN */
.kids-footer {
	background: var(--color-dark);
	color: #fff;
	padding: 60px 0 20px;
}
.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 40px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 2fr;
	gap: 40px;
}
.footer-col h3 {
	font-size: 20px;
	color: var(--color-yellow);
	margin-bottom: 20px;
	font-weight: 800;
}
.footer-col p { font-size:14px; opacity:0.8; margin-bottom:15px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:#eee; font-size:14px; }
.footer-col ul li a:hover { color: var(--color-yellow); }

.character-tags { display:flex; flex-wrap:wrap; gap:8px; }
.char-tag {
	background: rgba(255,255,255,0.1);
	border: 2px solid #fff;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 13px;
	color: #fff;
}
.char-tag:hover { background: var(--color-yellow); color: var(--color-dark); border-color: var(--color-dark); }

/* Newsletter */
.footer-newsletter-form {
	display: flex;
	border: 3px solid #fff;
	border-radius: 50px;
	overflow: hidden;
	background: #fff;
}
.footer-email-field {
	flex: 1;
	border: 0;
	padding: 8px 15px;
	outline: none;
	font-family: var(--font-kids);
}
.footer-email-submit {
	background: var(--color-yellow);
	border: 0;
	color: var(--color-dark);
	padding: 0 15px;
	cursor: pointer;
}
.footer-social-icons { display:flex; gap:10px; }
.social-btn {
	width: 35px;
	height: 35px;
	background: rgba(255,255,255,0.1);
	border: 2px solid #fff;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.social-btn:hover { background: var(--color-yellow); color: var(--color-dark); }

.footer-bottom-bar {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 20px;
}
.footer-bottom-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	opacity: 0.7;
}
.footer-bottom-links a { color:#fff; }

/* SINGLE TEMPLATES LAYOUT (Stories, Games, Puzzles, Quizzes, etc.) */
.single-story-article,
.single-game-article,
.single-puzzle-article,
.single-quiz-article,
.single-poem-article,
.single-rhyme-article,
.single-learning-article,
.single-coloring-article {
	max-width: 900px;
	margin: 40px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Header Cards */
.story-header-card,
.game-header,
.puzzle-header,
.quiz-header,
.poem-header,
.rhyme-header,
.learning-header,
.coloring-header {
	padding: 30px;
	margin-bottom: 30px;
}

/* Meta Badge Wrappers */
.story-badges,
.game-meta-wrapper,
.puzzle-meta-wrapper,
.quiz-meta-wrapper,
.poem-meta-wrapper,
.rhyme-meta-wrapper,
.learning-meta-wrapper,
.coloring-meta-wrapper {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 15px;
	align-items: center;
}

/* Titles */
.story-header-info h1,
.game-title,
.puzzle-title,
.quiz-title,
.poem-title,
.rhyme-title,
.learning-title,
.coloring-title {
	font-size: 32px;
	font-weight: 900;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
	line-height: 1.3;
	margin: 0;
}
.story-header-flex {
	display: flex;
	gap: 30px;
	align-items: center;
}
.story-header-info { flex:1; }
.story-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px; }
.btn-favorite {
	background: #fff;
	border: 2px solid var(--color-dark);
	border-radius: 50px;
	padding: 3px 12px;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}
.btn-favorite.active {
	background: var(--color-pink);
	color: #fff;
}
.story-title { font-size:36px; font-weight:900; margin-bottom:15px; }
.story-header-cover {
	width: 250px;
	height: 200px;
	border-radius: 18px;
	border: 5px solid var(--color-dark);
	overflow: hidden;
}
.story-cover-img { width:100%; height:100%; object-fit:cover; }

.story-audio-control-panel {
	padding: 20px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}
.kids-custom-audio-player { width: 300px; }
.tts-player-wrapper { display:flex; gap:10px; }

.story-content-body-wrap {
	padding: 40px;
	margin-bottom: 30px;
}
.story-text-size-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	border-bottom: 2px dashed #eee;
	padding-bottom: 15px;
	margin-bottom: 25px;
	font-size: 14px;
	font-weight: bold;
}
.text-size-btn {
	background: var(--color-gray);
	border: 2px solid var(--color-dark);
	border-radius: 5px;
	padding: 2px 10px;
	cursor: pointer;
	font-weight: bold;
}
.story-gujarati-text {
	font-size: 20px;
	line-height: 1.8;
}
.story-moral-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 25px;
	margin-bottom: 30px;
}
.moral-icon { font-size:45px; }
.story-video-card {
	padding: 25px;
	margin-bottom: 30px;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: 15px;
	overflow: hidden;
	border: 5px solid var(--color-dark);
	margin-top: 15px;
}
.video-container iframe {
	position: absolute;
	top: 0; left:0; width:100%; height:100%;
}
.story-action-buttons {
	display: flex;
	gap: 20px;
	margin: 40px 0;
	justify-content: center;
}

/* GAME RUNNER WIDGETS */
.game-viewport-card {
	padding: 30px;
	border: 8px solid var(--color-dark);
	box-shadow: 0 12px 0 var(--color-dark);
}
.game-stats-panel {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	background: var(--color-gray);
	padding: 10px 20px;
	border-radius: 12px;
	border: 3px solid var(--color-dark);
	font-weight: bold;
}
.stat-box { font-size:18px; }

/* Memory Match card grid */
.memory-game-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	max-width: 500px;
	margin: 0 auto;
}
.memory-card {
	height: 100px;
	perspective: 1000px;
	cursor: pointer;
}
.memory-card-inner {
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	position: relative;
	border: 4px solid var(--color-dark);
	border-radius: 12px;
}
.memory-card.flipped .memory-card-inner {
	transform: rotateY(180deg);
}
.memory-card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	border-radius: 8px;
}
.memory-card-back {
	background: var(--color-purple);
	color: #fff;
}
.memory-card-front {
	background: var(--color-yellow);
	transform: rotateY(180deg);
}
.game-win-overlay {
	position: absolute;
	top: 0; left:0; width:100%; height:100%;
	background: rgba(255, 255, 255, 0.95);
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 16px;
}
.win-banner h2 { font-size: 35px; color: var(--color-purple); margin-bottom: 10px; }

/* Balloon Math Pop styling */
.math-board {
	margin: 0 auto 25px;
	padding: 15px 30px;
	text-align: center;
	max-width: 420px;
	box-sizing: border-box;
}
.equation-box {
	font-size: 42px;
	font-weight: 900;
	color: var(--color-dark);
	text-shadow: 2px 2px 0 #fff;
	line-height: 1.2;
}

/* Balloon Math Pop spawn area */
.balloon-spawn-area {
	height: 380px;
	background: #E8F0FE;
	border-radius: 16px;
	border: 4px solid var(--color-dark);
	position: relative;
	overflow: hidden;
}
.start-game-overlay {
	position: absolute;
	top:0; left:0; width:100%; height:100%;
	display:flex; align-items:center; justify-content:center;
	background: rgba(255,255,255,0.7);
}
.balloon-pop {
	position: absolute;
	width: 60px;
	height: 75px;
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
	box-shadow: inset -5px -5px 0 rgba(0,0,0,0.15);
}
.balloon-pop:after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 28px;
	width: 4px;
	height: 10px;
	background: rgba(0,0,0,0.3);
}

/* PUZZLES RUNNER */
.wordsearch-layout {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.wordsearch-grid-container {
	flex: 1;
	min-width: 320px;
	display: flex;
	justify-content: center;
}
.word-grid-board {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 5px;
	max-width: 400px;
	border: 4px solid var(--color-dark);
	padding: 10px;
	border-radius: 15px;
	background: #fff;
}
.grid-letter-cell {
	width: 40px;
	height: 40px;
	border: 2px solid #eee;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}
.grid-letter-cell.selected { background: var(--color-skyblue); color:#fff; border-color: var(--color-dark); }
.grid-letter-cell.found { background: var(--color-green); color:#fff; border-color: var(--color-dark); }
.wordsearch-words-list { width: 280px; padding:20px; }
.wordsearch-words-list ul { list-style:none; margin-top:15px; }
.wordsearch-words-list ul li {
	padding: 5px 10px;
	margin-bottom: 8px;
	background:#fff;
	border: 2px solid var(--color-dark);
	border-radius: 8px;
	font-weight: bold;
}
.wordsearch-words-list ul li.found {
	text-decoration: line-through;
	opacity: 0.5;
	background: #e2e2e2;
}

/* Spot Difference */
.diff-images-grid {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* QUIZ RUNNER SYSTEM */
.quiz-play-stats {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 25px;
	flex-wrap: wrap;
}
.quiz-stat-box {
	background: #fff;
	border: 4px solid var(--color-dark);
	padding: 10px 20px;
	border-radius: 15px;
	font-size: 18px;
	font-weight: 900;
	box-shadow: 0 5px 0 var(--color-dark);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.quiz-progress-bar-wrap {
	height: 22px;
	background: #fff;
	border: 4px solid var(--color-dark);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 35px;
	box-shadow: inset 0 3px 0 rgba(0,0,0,0.1);
}
.quiz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--color-green), #0df2b6);
	transition: width 0.3s ease;
	border-radius: 20px 0 0 20px;
}
.quiz-question-box {
	padding: 35px 20px;
	margin-bottom: 30px;
	text-align: center;
	border: 6px solid var(--color-dark) !important;
	border-radius: 24px !important;
	box-shadow: 0 10px 0 var(--color-dark) !important;
}
.question-text {
	font-size: 28px;
	font-weight: 900;
	color: var(--color-dark);
	text-shadow: 2px 2px 0 #fff;
	line-height: 1.4;
}
.quiz-options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.quiz-option-btn {
	display: flex;
	align-items: center;
	gap: 15px;
	background: #fff;
	border: 4px solid var(--color-dark);
	border-radius: 18px;
	padding: 12px 18px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 6px 0 var(--color-dark);
	transition: all 0.15s ease;
	font-family: var(--font-kids);
	width: 100%;
}
.option-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid var(--color-dark);
	font-size: 16px;
	font-weight: 900;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 3px 0 var(--color-dark);
}
.option-badge-1 { background: var(--color-purple); }
.option-badge-2 { background: var(--color-skyblue); }
.option-badge-3 { background: var(--color-orange); }
.option-badge-4 { background: var(--color-green); }
.option-badge-true { background: var(--color-green); }
.option-badge-false { background: var(--color-pink); }

.option-text {
	flex: 1;
}

.quiz-option-btn:hover {
	background: var(--color-gray);
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--color-dark);
}
.quiz-option-btn:active {
	transform: translateY(2px);
	box-shadow: 0 4px 0 var(--color-dark);
}
.quiz-option-btn:disabled {
	cursor: not-allowed;
}
.quiz-option-btn.correct { background: var(--color-green) !important; color:#fff; box-shadow:0 3px 0 var(--color-dark); }
.quiz-option-btn.wrong { background: var(--color-pink) !important; color:#fff; box-shadow:0 3px 0 var(--color-dark); }

/* COLORING CANVAS */
.coloring-game-layout {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.coloring-toolbox { width: 220px; padding: 20px; }

/* Tool selector row */
.tool-selectors {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

/* Base tool button */
.tool-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 6px;
	border-radius: 14px;
	border: 3px solid var(--color-dark);
	background: #f5f5f5;
	color: var(--color-dark);
	font-size: 11px;
	font-weight: 900;
	font-family: var(--font-kids);
	cursor: pointer;
	box-shadow: 0 4px 0 var(--color-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	position: relative;
	opacity: 0.55;
}
.tool-btn i {
	font-size: 22px;
	transition: transform 0.2s ease;
}
.tool-btn:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* Per-tool idle accent colours */
.tool-btn-bucket { border-color: #4EA8DE; box-shadow: 0 4px 0 #4EA8DE; }
.tool-btn-brush  { border-color: #06D6A0; box-shadow: 0 4px 0 #06D6A0; }
.tool-btn-eraser { border-color: #FF9F1C; box-shadow: 0 4px 0 #FF9F1C; }

/* ===== ACTIVE TOOL STATE ===== */
@keyframes tool-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), 0 5px 0 var(--color-dark); }
	60%  { box-shadow: 0 0 0 8px rgba(255,255,255,0), 0 5px 0 var(--color-dark); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 5px 0 var(--color-dark); }
}

.tool-btn.active-tool {
	opacity: 1;
	transform: translateY(-4px) scale(1.08);
	color: #fff;
	border-width: 4px;
}
.tool-btn.active-tool i {
	transform: scale(1.2);
}
/* Bucket active → blue */
.tool-btn-bucket.active-tool {
	background: #4EA8DE;
	border-color: var(--color-dark);
	box-shadow: 0 6px 0 var(--color-dark), 0 0 0 4px #4EA8DE;
	animation: tool-pulse 1.6s ease-out infinite;
}
/* Brush active → green */
.tool-btn-brush.active-tool {
	background: #06D6A0;
	border-color: var(--color-dark);
	box-shadow: 0 6px 0 var(--color-dark), 0 0 0 4px #06D6A0;
	animation: tool-pulse 1.6s ease-out infinite;
}
/* Eraser active → orange */
.tool-btn-eraser.active-tool {
	background: #FF9F1C;
	border-color: var(--color-dark);
	box-shadow: 0 6px 0 var(--color-dark), 0 0 0 4px #FF9F1C;
	animation: tool-pulse 1.6s ease-out infinite;
}

/* Tiny "selected" badge arrow above active button */
.tool-btn.active-tool::after {
	content: '▼';
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--color-dark);
	line-height: 1;
}
/* extra bottom gap so arrow shows */
.tool-selectors { padding-bottom: 12px; }

/* Color palette */
.color-palette-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 15px;
}
.palette-color {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid var(--color-dark);
	transition: transform 0.15s;
}
.palette-color.selected {
	transform: scale(1.2);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-dark);
}

/* Flashcards */
.learning-flashcards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
	margin-top: 25px;
}
.flashcard-scene {
	height: 200px;
	perspective: 600px;
}
.flashcard-card {
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	cursor: pointer;
}
.flashcard-card.is-flipped {
	transform: rotateY(180deg);
}
.flashcard-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 18px;
	border: 4px solid var(--color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px;
}
.flashcard-front {
	box-shadow: var(--shadow-yellow);
}
.flashcard-back {
	transform: rotateY(180deg);
	box-shadow: var(--shadow-skyblue);
	color: #fff;
}
.card-inner-val { font-size:45px; font-weight:900; }
.card-inner-val-back { font-size:24px; font-weight:800; }

/* Parents Dashboard */
.parents-layout-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 30px;
}
.article-guide-card {
	padding: 30px;
	margin-bottom: 25px;
}
.article-guide-card h2 { font-size:24px; font-weight:800; margin:10px 0 15px; }
.article-guide-card ul { margin-top:15px; list-style:none; }
.article-guide-card ul li { margin-bottom:10px; font-weight:bold; }

.child-dashboard-card {
	padding: 30px;
}
.dashboard-widget-section {
	background: #fff;
	border: 4px solid var(--color-dark);
	border-radius: 15px;
	padding: 20px;
}
.dashboard-widget-section h3 {
	font-size: 16px;
	border-bottom: 2px dashed #eee;
	padding-bottom: 8px;
	margin-bottom: 15px;
}
.dashboard-list { list-style:none; }
.dashboard-list li {
	padding: 8px;
	margin-bottom: 8px;
	background: var(--color-gray);
	border: 2px solid var(--color-dark);
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

/* Pagination pop style */
.kids-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}
.kids-pagination a, .kids-pagination span {
	padding: 8px 16px;
	border: 3px solid var(--color-dark);
	border-radius: 12px;
	background: #fff;
	font-weight: bold;
	box-shadow: 0 4px 0 var(--color-dark);
}
.kids-pagination a:hover, .kids-pagination span.current {
	background: var(--color-yellow);
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--color-dark);
}

/* Archive Hero & Layout Container Spacing */
.archive-hero {
	padding: 40px 20px;
	margin: 35px auto 25px;
	max-width: 1200px;
	text-align: center;
	box-sizing: border-box;
}
.archive-hero h1 {
	font-size: 32px;
	font-weight: 900;
	margin-bottom: 12px;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
	line-height: 1.3;
}
.archive-hero p {
	font-size: 17px;
	font-weight: bold;
	opacity: 0.95;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}
.archive-layout-container {
	max-width: 1200px;
	margin: 0 auto 60px;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Kids Filter Bar Styling */
.kids-filter-bar {
	background: var(--color-white);
	border: 4px solid var(--color-dark);
	border-radius: 20px;
	padding: 15px 25px;
	margin: 25px auto;
	max-width: 1200px;
	box-shadow: 0 6px 0 var(--color-dark);
}
.filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}
.filter-group {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	color: var(--color-dark);
	font-size: 15px;
}
.filter-group label {
	white-space: nowrap;
}
.filter-group select {
	padding: 8px 16px;
	border: 3px solid var(--color-dark);
	border-radius: 12px;
	font-family: var(--font-kids);
	font-weight: 800;
	color: var(--color-dark);
	background: #fff;
	cursor: pointer;
	outline: none;
	box-shadow: 0 3px 0 var(--color-dark);
	transition: all 0.1s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 35px;
}
.filter-group select:focus, .filter-group select:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--color-dark);
}
.clear-filters-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	font-size: 14px;
	color: #fff !important;
	background: var(--color-orange);
	border: 3px solid var(--color-dark);
	border-radius: 12px;
	padding: 8px 16px;
	box-shadow: 0 3px 0 var(--color-dark);
	transition: all 0.1s ease;
	cursor: pointer;
	text-decoration: none;
}
.clear-filters-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--color-dark);
}
.clear-filters-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--color-dark);
}

/* Print CSS */
@media print {
	.kids-header, .kids-footer, .story-audio-control-panel, .story-action-buttons, .related-stories-section, .story-text-size-controls, .kids-filter-bar {
		display: none !important;
	}
	body { background:#fff; }
	.single-story-article { margin: 0; width:100%; max-width:none; }
	.story-header-card { border:0; box-shadow:none; }
}

/* Responsive Design System */
@media (max-width: 900px) {
	/* Header Layout: Logo on left, Hamburger Toggle on right */
	.kids-header {
		padding: 6px 0 !important;
	}
	.kids-header-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 6px 12px !important;
		gap: 8px !important;
		position: relative;
	}
	.kids-logo-area {
		order: 1;
	}
	.kids-text-logo {
		font-size: 18px !important;
		gap: 2px !important;
	}
	.letter {
		padding: 2px 6px !important;
		border-width: 2px !important;
		border-radius: 6px !important;
		box-shadow: 0 2px 0 var(--color-dark) !important;
	}
	.kids-navigation {
		order: 2;
	}
	.kids-search-box {
		order: 3;
		width: 100%;
		margin-top: 2px !important;
	}
	.search-input-wrap {
		width: 100%;
		height: 36px !important;
	}
	.search-field {
		width: 100%;
		height: 36px !important;
		padding: 6px 12px !important;
		font-size: 13px !important;
		border-width: 2px !important;
		border-radius: 12px 0 0 12px !important;
	}
	.search-submit {
		height: 36px !important;
		width: 36px !important;
		border-width: 2px !important;
		border-radius: 0 12px 12px 0 !important;
		font-size: 14px !important;
	}
	
	/* Menu Toggle Button: Beautiful compact cartoon hamburger button */
	.menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 36px !important;
		height: 36px !important;
		border-radius: 8px !important;
		border: 2px solid var(--color-dark) !important;
		background: var(--color-yellow) !important;
		box-shadow: 0 2px 0 var(--color-dark) !important;
		cursor: pointer;
		font-size: 16px !important;
		color: var(--color-dark);
		transition: all 0.1s ease;
		outline: none;
		padding: 0;
	}
	.menu-toggle:active {
		transform: translateY(1px);
		box-shadow: 0 1px 0 var(--color-dark) !important;
	}
	
	/* Dropdown Menu block */
	.menu-primary-container {
		display: none;
		width: calc(100% - 24px);
		background: #fff;
		border: 4px solid var(--color-dark);
		border-radius: 20px;
		box-shadow: 0 6px 0 var(--color-dark);
		padding: 15px;
		margin: 0 12px;
		position: absolute;
		top: 86px;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.menu-primary-container.active {
		display: block !important;
	}
	.menu-primary-container ul, ul#primary-menu {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		width: 100%;
	}
	.menu-primary-container ul li a, ul#primary-menu li a {
		display: flex !important;
		justify-content: center;
		font-size: 16px;
		padding: 10px 20px;
		text-align: center;
	}
	
	/* Grids: 2 columns on tablet */
	.kids-grid, .grid-3, .grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 15px;
	}
	
	.footer-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
	.parents-layout-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}
}

@media (max-width: 600px) {
	/* Grids: 1 column on mobile phones */
	.kids-grid, .grid-2, .grid-3, .grid-4 {
		grid-template-columns: 1fr !important;
		gap: 15px;
	}
	
	.footer-container {
		grid-template-columns: 1fr;
	}
	.hero-headline {
		font-size: 28px !important;
		line-height: 1.3;
	}
	.hero-subheading {
		font-size: 16px !important;
	}
	.hero-buttons {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}
	.hero-buttons .btn-kids {
		width: 100%;
	}
	
	/* Story Detail page responsive fixes */
	.story-header-flex {
		flex-direction: column-reverse;
		gap: 15px;
	}
	.story-header-cover {
		width: 100% !important;
		height: 180px !important;
		border-radius: 12px;
	}
	.story-audio-control-panel {
		padding: 15px;
	}
	.audio-buttons {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}
	.audio-buttons button {
		width: 100%;
	}
	
	/* Canvas Scaling */
	canvas {
		max-width: 100% !important;
		height: auto !important;
	}
	.coloring-game-layout {
		flex-direction: column;
	}
	.coloring-toolbox {
		width: 100%;
		padding: 15px 0;
	}
	.quiz-options-grid {
		grid-template-columns: 1fr;
	}
	
	/* Font Resizer controls stack */
	.resizer-wrap {
		width: 100%;
		justify-content: center;
	}
	
	/* Mobile Filter Bar */
	.kids-filter-bar {
		padding: 15px;
		margin: 15px auto;
	}
	.filter-form {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}
	.filter-group {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 6px;
	}
	.filter-group select {
		width: 100%;
	}
	.clear-filters-btn {
		width: 100%;
		justify-content: center;
	}
	
	/* Mobile Hero Spacing */
	.archive-hero {
		padding: 25px 15px;
		margin: 20px auto 15px;
		border-radius: 18px !important;
	}
	.archive-hero h1 {
		font-size: 24px !important;
	}
	.archive-hero p {
		font-size: 14px !important;
		line-height: 1.5;
	}
	.archive-layout-container {
		margin-bottom: 40px;
		padding: 0 15px;
	}
	
	/* Mobile Section Headers */
	.section-header {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 10px !important;
	}
	.section-header .section-title {
		text-align: center !important;
	}
	.view-all-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	
	/* Mobile Single Templates Layout */
	.single-story-article,
	.single-game-article,
	.single-puzzle-article,
	.single-quiz-article,
	.single-poem-article,
	.single-rhyme-article,
	.single-learning-article,
	.single-coloring-article {
		margin: 20px auto !important;
		padding: 0 15px !important;
	}
	.story-header-card,
	.game-header,
	.puzzle-header,
	.quiz-header,
	.poem-header,
	.rhyme-header,
	.learning-header,
	.coloring-header {
		padding: 20px 15px !important;
		margin-bottom: 20px !important;
	}
	.story-header-info h1,
	.game-title,
	.puzzle-title,
	.quiz-title,
	.poem-title,
	.rhyme-title,
	.learning-title,
	.coloring-title {
		font-size: 24px !important;
	}
	.equation-box {
		font-size: 32px !important;
	}
}

/* ====================================================
   POEM LAYOUT SPLIT & RESPONSIVE RULES
   ==================================================== */
.poem-split-layout {
	display: flex;
	gap: 30px;
	margin-top: 30px;
}
.poem-text-content {
	flex: 1.2;
}
.poem-media-column {
	flex: 0.8;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 900px) {
	.poem-split-layout {
		flex-direction: column !important;
		gap: 20px;
	}
	.poem-media-column {
		width: 100% !important;
	}
	.kids-ajax-search-results {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}
}

@media (max-width: 480px) {
	/* Crossword Mobile Auto-Scale */
	.crossword-grid {
		grid-template-columns: repeat(5, 42px) !important;
		gap: 6px !important;
		padding: 10px !important;
	}
	.crossword-grid div {
		width: 42px !important;
		height: 42px !important;
		font-size: 16px !important;
		border-radius: 6px !important;
	}
	.crossword-grid input {
		width: 30px !important;
		height: 30px !important;
		font-size: 16px !important;
		border-radius: 6px !important;
		border-width: 2px !important;
	}

	/* Sudoku Mobile Auto-Scale */
	.sudoku-grid {
		grid-template-columns: repeat(4, 52px) !important;
		gap: 6px !important;
		padding: 10px !important;
	}
	.sudoku-grid div {
		width: 52px !important;
		height: 52px !important;
		font-size: 22px !important;
		border-radius: 8px !important;
		border-width: 2px !important;
	}

	/* Jumble Mobile Auto-Scale */
	.jumble-container {
		padding: 15px !important;
	}
	.target-word-display {
		font-size: 1.6rem !important;
		letter-spacing: 4px !important;
		min-height: 45px !important;
	}
	.scrambled-letters button {
		padding: 8px 12px !important;
		font-size: 18px !important;
		border-radius: 8px !important;
	}
}

@media (max-width: 400px) {
	.diff-panel, .diff-panel canvas {
		max-width: 100% !important;
		height: auto !important;
	}
}