/* --- TAHMID'S MAGIC PLAYGROUND - CORE CSS --- */

:root {
    /* Playful Vibrant Pastel Palette */
    --color-bg-grad: linear-gradient(135deg, #E0F7FA 0%, #FFF9C4 50%, #F8BBD0 100%);
    --color-primary: #FF4081;
    --color-secondary: #00E676;
    --color-warning: #FFD700;
    --color-danger: #FF5252;
    --color-dark: #37474F;
    --color-light: #FFFFFF;
    
    /* Claymorphism & Toy Shadows */
    --shadow-soft: 0 8px 30px rgba(0,0,0,0.06);
    --shadow-clay-primary: 
        inset 0 -8px 0px rgba(0, 0, 0, 0.15),
        inset 0 8px 8px rgba(255, 255, 255, 0.4),
        0 15px 20px rgba(255, 64, 129, 0.2);
    --shadow-clay-secondary: 
        inset 0 -8px 0px rgba(0, 0, 0, 0.15),
        inset 0 8px 8px rgba(255, 255, 255, 0.4),
        0 15px 20px rgba(0, 230, 118, 0.2);
    --shadow-clay-card:
        inset 0 -10px 0px rgba(0, 0, 0, 0.05),
        inset 0 10px 10px rgba(255, 255, 255, 0.6),
        0 20px 25px rgba(0, 0, 0, 0.05);
    
    /* Rounded Values for Kids Toys */
    --radius-bubble: 50%;
    --radius-toy: 32px;
    --radius-card: 24px;
    
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Reset & Base Rules */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Fredoka', 'Quicksand', sans-serif;
    color: var(--color-dark);
    min-height: 100vh;
    background: var(--color-bg-grad);
    background-attachment: fixed;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Floating Confetti Layer */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* Ambient Sky Elements */
.sky-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.cloud {
    position: absolute;
    font-size: 6rem;
    opacity: 0.25;
    animation: float-cloud 45s linear infinite;
    user-select: none;
}

.cloud-1 { top: 10%; left: -10%; animation-duration: 60s; }
.cloud-2 { top: 40%; left: -15%; animation-duration: 45s; animation-delay: -10s; }
.cloud-3 { top: 75%; left: -12%; animation-duration: 75s; animation-delay: -25s; }

.bubble-bg {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.4;
    animation: float-bubble 20s infinite ease-in-out;
}

.bubble-1 { width: 150px; height: 150px; left: 10%; bottom: 15%; animation-delay: 0s; }
.bubble-2 { width: 250px; height: 250px; right: 5%; top: 20%; animation-delay: -4s; }
.bubble-3 { width: 80px; height: 80px; right: 30%; bottom: 35%; animation-delay: -8s; }

/* Main App Wrapper */
.app-container {
    width: 100%;
    max-width: 1200px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 10;
    flex: 1;
}

/* Custom Letter Bounce Header */
.main-header {
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.magic-title {
    font-size: 3.5rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06));
}

.magic-title .letter {
    display: inline-block;
    color: var(--color-primary);
    cursor: pointer;
    animation: text-jump 3s infinite ease-in-out;
    animation-delay: calc(0.1s * var(--i));
    transition: var(--transition-bounce);
}

/* Cycle colors for letters dynamically */
.magic-title .letter:nth-child(5n+1) { color: #FF5252; }
.magic-title .letter:nth-child(5n+2) { color: #FF9100; }
.magic-title .letter:nth-child(5n+3) { color: #FFD700; }
.magic-title .letter:nth-child(5n+4) { color: #00E676; }
.magic-title .letter:nth-child(5n+5) { color: #2979FF; }

.magic-title .letter:hover {
    transform: scale(1.4) rotate(15deg);
    filter: brightness(1.1);
}

.magic-title .spacer {
    width: 15px;
}

.subtitle {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.3rem;
    color: var(--color-dark);
    font-weight: 500;
}

.subtitle b {
    color: var(--color-primary);
    position: relative;
    display: inline-block;
    animation: nudge 2s infinite ease-in-out;
}

/* Papa's Voice Message Header Capsule widget */
.voice-capsule-container {
    margin-top: 10px;
    animation: heart-pulse 2s infinite ease-in-out;
}

.voice-capsule-btn {
    border: none;
    outline: none;
    background: linear-gradient(135deg, #FFD54F 0%, #FFB300 100%);
    border: 4px solid #FF8F00;
    padding: 12px 28px;
    border-radius: 40px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4E342E;
    cursor: pointer;
    box-shadow: 
        inset 0 4px 0 rgba(255,255,255,0.4),
        inset 0 -6px 0 rgba(0,0,0,0.12),
        0 10px 15px rgba(255, 143, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-bounce);
}

.voice-capsule-btn .heart-icon {
    font-size: 1.7rem;
    display: inline-block;
    animation: heart-shake 0.8s infinite alternate ease-in-out;
}

.voice-capsule-btn:hover {
    transform: scale(1.08) translateY(-4px);
    background: linear-gradient(135deg, #FFE082 0%, #FFC107 100%);
}

.voice-capsule-btn:active {
    transform: scale(0.95) translateY(2px);
    box-shadow: inset 0 6px 8px rgba(0,0,0,0.2);
}

/* Beautiful Interactive Nav Tabs */
.game-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}

.tab-button {
    border: none;
    outline: none;
    background: var(--color-light);
    color: var(--color-dark);
    padding: 16px 12px;
    border-radius: var(--radius-card);
    font-family: 'Fredoka', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-clay-card);
    border: 3px solid transparent;
}

.tab-button .tab-icon {
    font-size: 2rem;
    transition: var(--transition-bounce);
}

.tab-button:hover {
    transform: translateY(-8px);
    background: #FDFEFE;
}

.tab-button:hover .tab-icon {
    transform: scale(1.2) rotate(8deg);
}

.tab-button:active {
    transform: translateY(2px);
}

/* Active tab style with vivid styling color matching */
.tab-button.active {
    color: var(--color-light);
    box-shadow: var(--shadow-clay-primary);
    transform: translateY(-4px);
}

#tab-safari.active { background: #FFA726; border-color: #E65100; box-shadow: 0 10px 15px rgba(255, 167, 38, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }
#tab-balloon.active { background: #FF5252; border-color: #C62828; box-shadow: 0 10px 15px rgba(255, 82, 82, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }
#tab-paint.active { background: #00E676; border-color: #2E7D32; box-shadow: 0 10px 15px rgba(0, 230, 118, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }
#tab-piano.active { background: #2979FF; border-color: #1565C0; box-shadow: 0 10px 15px rgba(41, 121, 255, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }
#tab-star.active { background: #00897B; border-color: #004D40; box-shadow: 0 10px 15px rgba(0, 137, 123, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }
#tab-tv.active { background: #7E57C2; border-color: #4527A0; box-shadow: 0 10px 15px rgba(126, 87, 194, 0.35), inset 0 -6px 0px rgba(0,0,0,0.15); }

/* Play Viewport Box */
.play-viewport {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-toy);
    padding: 30px;
    box-shadow: var(--shadow-clay-card);
    border: 4px solid var(--color-light);
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

/* General Panels styles */
.game-panel {
    display: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-panel.active {
    display: block;
    opacity: 1;
    transform: scale(1);
}

.panel-header {
    margin-bottom: 25px;
    text-align: center;
}

.panel-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* --- GAME 1: SOUND SAFARI --- */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
    justify-content: center;
}

.animal-card {
    background: var(--color-light);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    box-shadow: var(--shadow-clay-card);
    transition: var(--transition-bounce);
    user-select: none;
    border: 4px solid transparent;
}

.animal-avatar {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-bubble);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: inset 0 -6px 0px rgba(0, 0, 0, 0.08), 0 8px 12px rgba(0,0,0,0.05);
    transition: var(--transition-bounce);
}

/* Custom background for avatars */
.lion-bg { background-color: #FFF3E0; border: 4px solid #FFE082; }
.cat-bg { background-color: #ECEFF1; border: 4px solid #CFD8DC; }
.dog-bg { background-color: #EFEBE9; border: 4px solid #D7CCC8; }
.bird-bg { background-color: #FFFDE7; border: 4px solid #FFF59D; }
.frog-bg { background-color: #E8F5E9; border: 4px solid #C8E6C9; }

.animal-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-dark);
}

/* Animal Hover & Animation effects */
.animal-card:hover {
    transform: translateY(-10px) rotate(3deg);
    box-shadow: 0 25px 30px rgba(0, 0, 0, 0.08);
}

.animal-card:hover .animal-avatar {
    transform: scale(1.1);
}

.wiggling {
    animation: animal-wiggle 0.6s ease-in-out;
}

.animal-card:hover .svg-animal .svg-ear-left { transform: rotate(25deg); }
.animal-card:hover .svg-animal .svg-ear-right { transform: rotate(-25deg); }
.animal-card:hover .svg-animal .svg-wing-left { transform: rotate(-35deg); }
.animal-card:hover .svg-animal .svg-wing-right { transform: rotate(35deg); }
.animal-card:hover .svg-animal .svg-beak { transform: scale(1.2); }
.animal-card:hover .svg-animal .svg-tongue { transform: scaleY(1.3) translateY(1px); }

/* --- GAME 2: BALLOON POP POP --- */
.score-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.score-badge {
    font-size: 1.6rem;
    font-weight: 700;
    background: #FFEB3B;
    padding: 8px 24px;
    border-radius: var(--radius-bubble);
    border: 3px solid #FBC02D;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
}

.balloon-canvas-container {
    width: 100%;
    height: 380px;
    background: linear-gradient(180deg, #E0F7FA 0%, #FFFFFF 100%);
    border-radius: var(--radius-card);
    border: 5px solid #80DEEA;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-clay-card);
}

#balloon-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

/* Playful Action Button styling */
.magic-btn {
    border: none;
    outline: none;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: var(--radius-card);
    cursor: pointer;
    background: #00E676;
    color: white;
    box-shadow: var(--shadow-clay-secondary);
    transition: var(--transition-bounce);
    border: 3px solid #2E7D32;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.magic-btn:hover {
    transform: translateY(-4px) scale(1.05);
    filter: brightness(1.05);
}

.magic-btn:active {
    transform: translateY(4px);
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.2);
}

.magic-btn.btn-danger {
    background: #FF5252;
    border-color: #C62828;
    box-shadow: 0 10px 15px rgba(255, 82, 82, 0.25), inset 0 -6px 0px rgba(0,0,0,0.15);
}

.magic-btn.btn-secondary {
    background: #90A4AE;
    border-color: #546E7A;
    box-shadow: 0 10px 15px rgba(144, 164, 174, 0.25), inset 0 -6px 0px rgba(0,0,0,0.15);
}

.magic-btn.btn-small {
    padding: 8px 18px;
    font-size: 1rem;
    border-radius: 16px;
}

/* Start Overlay Game Screen */
.game-ready-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 10;
    transition: opacity 0.4s ease;
}

.huge-emoji {
    font-size: 5rem;
    animation: float-cloud 4s ease-in-out infinite alternate;
}

/* --- GAME 3: RAINBOW PAINT --- */
.paint-container {
    display: flex;
    gap: 25px;
    width: 100%;
}

.paint-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 250px;
    background: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: var(--radius-card);
    border: 3px solid var(--color-light);
    box-shadow: var(--shadow-clay-card);
}

.tool-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-label {
    font-size: 1rem;
    font-weight: 700;
    color: #546E7A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-btn {
    border: none;
    outline: none;
    background: white;
    padding: 10px 14px;
    border-radius: 14px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.03);
    transition: var(--transition-bounce);
    border: 2px solid transparent;
}

.tool-btn:hover {
    transform: translateX(4px);
    background: #FAFAFA;
}

.tool-btn.active {
    background: var(--color-primary);
    color: white;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 5px 8px rgba(255, 64, 129, 0.25);
}

/* Palette selection */
.color-palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.color-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 -3px 0 rgba(0,0,0,0.15);
    transition: var(--transition-bounce);
    outline: none;
}

.color-dot:hover {
    transform: scale(1.15);
}

.color-dot.active {
    transform: scale(1.2);
    border-color: #37474F;
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

/* Stamp Tool Palette */
.stamp-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stamp-btn {
    font-size: 1.6rem;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: white;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.03);
    transition: var(--transition-bounce);
    outline: none;
}

.stamp-btn:hover {
    transform: scale(1.15) rotate(10deg);
}

.stamp-btn.active {
    border-color: var(--color-primary);
    background: #FFF3E0;
    transform: scale(1.1);
}

/* Canvas Area Frame */
.canvas-wrapper {
    flex: 1;
    position: relative;
    border-radius: var(--radius-card);
    border: 6px solid #FF8A80;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-clay-card);
}

#paint-canvas {
    width: 100%;
    height: 400px;
    display: block;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='rgba(255, 64, 129, 0.3)' stroke='%23FF4081' stroke-width='2'/></svg>") 12 12, auto;
}

.canvas-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    pointer-events: none;
}

/* --- GAME 4: MELODY MAKER --- */
.piano-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.piano-container {
    width: 100%;
    padding: 30px 10px;
    background: #37474F;
    border-radius: var(--radius-card);
    box-shadow: 
        inset 0 10px 10px rgba(0, 0, 0, 0.5),
        inset 0 -10px 10px rgba(255, 255, 255, 0.1),
        0 20px 30px rgba(0, 0, 0, 0.15);
    border: 5px solid #263238;
}

.piano-keyboard {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    width: 100%;
    height: 250px;
}

.piano-key {
    background: var(--color-light);
    border-radius: 12px 12px 18px 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 25px;
    gap: 10px;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        inset 0 6px 0 white,
        inset 0 -12px 0 var(--key-color),
        0 8px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid #E0E0E0;
}

.piano-key .key-label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-dark);
}

.piano-key .key-emoji {
    font-size: 1.8rem;
    transition: transform 0.2s ease;
}

/* Key Hover effects */
.piano-key:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 6px 0 white,
        inset 0 -12px 0 var(--key-color),
        0 10px 16px rgba(0, 0, 0, 0.35);
}

.piano-key:hover .key-emoji {
    transform: scale(1.15);
}

.piano-key.active, .piano-key:active {
    transform: translateY(8px);
    box-shadow: 
        inset 0 4px 6px rgba(0, 0, 0, 0.4),
        inset 0 -4px 0 var(--key-color),
        0 2px 4px rgba(0, 0, 0, 0.2);
    border-color: var(--key-color);
    background-color: #F5F5F5;
}

.note-bubble {
    position: absolute;
    pointer-events: none;
    font-size: 1.8rem;
    color: var(--note-color);
    animation: rise-note 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 99;
}

/* --- GAME 5: LITTLE STAR ACADEMY --- */
.star-academy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.academy-card {
    background: var(--color-light);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-clay-card);
    border: 4px solid var(--color-light);
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.academy-card.full-width {
    grid-column: span 2;
    background: linear-gradient(135deg, #E0F2F1 0%, #FFFFFF 100%);
    border: 4px solid #A7FFEB;
}

.academy-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    border-bottom: 3px dashed #B0BEC5;
    padding-bottom: 8px;
    text-align: center;
}

.islamic-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 5px;
}

.islamic-btn {
    border: none;
    outline: none;
    padding: 16px 20px;
    border-radius: var(--radius-card);
    cursor: pointer;
    font-family: 'Fredoka', 'Cairo', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-bounce);
    position: relative;
    border: 3px solid transparent;
    box-shadow: var(--shadow-clay-card);
}

.islamic-btn .arabic-txt {
    font-family: 'Cairo', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--color-dark);
    text-shadow: 0 2px 4px rgba(255,255,255,0.6);
}

.islamic-btn .english-translation {
    font-size: 1.2rem;
    font-weight: 700;
    color: #455A64;
}

.islamic-btn .tooltip-txt {
    font-size: 0.9rem;
    font-weight: 500;
    color: #78909C;
    text-align: center;
}

.islamic-btn.bismillah-bg {
    background: linear-gradient(135deg, #A7FFEB 0%, #64FFDA 100%);
    border-color: #00BFA5;
    box-shadow: 0 10px 15px rgba(100, 255, 218, 0.25), inset 0 -6px 0px rgba(0,0,0,0.12);
}

.islamic-btn.alhamdulillah-bg {
    background: linear-gradient(135deg, #FFE082 0%, #FFD54F 100%);
    border-color: #FFB300;
    box-shadow: 0 10px 15px rgba(255, 213, 79, 0.25), inset 0 -6px 0px rgba(0,0,0,0.12);
}

.islamic-btn:hover {
    transform: translateY(-6px) scale(1.02);
}

.islamic-btn:active {
    transform: translateY(3px);
}

.dynamic-bubbles-helper {
    font-size: 1rem;
    font-weight: 600;
    color: #546E7A;
    text-align: center;
    background: white;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 5px;
    animation: nudge 2s infinite ease-in-out;
}

.arabic-alphabet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.arabic-letter-card {
    background: white;
    border-radius: var(--radius-card);
    padding: 12px 6px;
    border: 3px solid transparent;
    cursor: pointer;
    box-shadow: var(--shadow-clay-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: var(--transition-bounce);
    user-select: none;
}

.arabic-letter-card .arabic-char {
    font-family: 'Cairo', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #E65100;
}

.arabic-letter-card .arabic-letter-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
}

.arabic-letter-card .arabic-letter-desc {
    font-size: 0.9rem;
    font-weight: 600;
    color: #78909C;
    background: #ECEFF1;
    padding: 2px 10px;
    border-radius: 12px;
}

.arabic-letter-card:hover {
    transform: translateY(-8px) rotate(-3deg);
    border-color: #FFB74D;
    background: #FFFDE7;
}

.arabic-letter-card:active {
    transform: translateY(2px);
}

.counting-playground {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex: 1;
}

.count-instruction {
    font-size: 1.15rem;
    font-weight: 600;
    color: #455A64;
}

.stars-counting-row {
    display: flex;
    gap: 10px;
}

.clickable-count-star {
    font-size: 2.8rem;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-bounce);
    opacity: 0.35;
    filter: grayscale(100%);
}

.clickable-count-star:hover {
    transform: scale(1.2);
}

.clickable-count-star.lit {
    opacity: 1;
    filter: grayscale(0%) drop-shadow(0 0 10px #FFD700);
    animation: star-pulse 0.4s ease forwards;
}

.count-display-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FFD54F;
    border: 4px solid #FFB300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 0 4px 0 white,
        inset 0 -6px 0 rgba(0,0,0,0.1),
        0 8px 12px rgba(255, 179, 0, 0.3);
}

#count-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-dark);
}

.count-bubble {
    position: absolute;
    pointer-events: none;
    font-size: 2.5rem;
    font-weight: 800;
    color: #FF5252;
    animation: rise-note 1.2s ease-out forwards;
    z-index: 99;
}

/* --- GAME 6: TAHMID'S TV RETRO CABINET --- */
.tv-playground {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tv-cabinet {
    width: 440px;
    height: 310px;
    background: #5D4037; /* Warm Wood Cabinets */
    border: 12px solid #8D6E63;
    border-radius: 36px;
    box-shadow: 
        inset 0 6px 0 rgba(255,255,255,0.2),
        inset 0 -12px 0 rgba(0,0,0,0.2),
        0 20px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    padding: 12px;
    position: relative;
    gap: 15px;
    user-select: none;
}

/* Bouncy wiggling TV Antenna */
.tv-antenna {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 60px;
    pointer-events: none;
}

.tv-antenna .antenna-base {
    position: absolute;
    bottom: 0;
    left: 35px;
    width: 30px;
    height: 12px;
    background: #37474F;
    border-radius: 6px 6px 0 0;
}

.tv-antenna .antenna-rod {
    position: absolute;
    bottom: 10px;
    width: 4px;
    height: 48px;
    background: #B0BEC5;
    border-radius: 2px;
    transform-origin: bottom center;
}

.tv-antenna .antenna-rod::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF5252;
}

.tv-antenna .antenna-rod.left {
    left: 36px;
    transform: rotate(-30deg);
    animation: antenna-swing-l 4s infinite alternate ease-in-out;
}

.tv-antenna .antenna-rod.right {
    right: 36px;
    transform: rotate(30deg);
    animation: antenna-swing-r 4.5s infinite alternate ease-in-out;
}

.tv-screen-bezel {
    flex: 1;
    background: #37474F; /* Screen frame */
    border-radius: 24px;
    padding: 10px;
    box-shadow: inset 0 6px 8px rgba(0,0,0,0.4);
    display: flex;
}

.tv-screen-inner {
    flex: 1;
    background: black;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

#tv-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: 12px;
}

/* Pure CSS TV Static Noise overlay */
.tv-static-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 2px
    ), #212121;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.tv-static-layer.active {
    opacity: 1;
    animation: static-noise 0.1s infinite;
}

/* Retro Mechanical dials */
.tv-controls-bar {
    width: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0;
    background: #4E342E;
    border-radius: 16px;
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.3);
}

.tv-knob {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3E2723;
    border: 3px solid #271C19;
    box-shadow: 
        inset 0 3px 0 rgba(255,255,255,0.1),
        0 4px 6px rgba(0,0,0,0.3);
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.tv-knob::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #FFD54F;
    border-radius: 2px;
}

.tv-knob:hover {
    transform: rotate(45deg);
}

.tv-speaker-grille {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 32px;
}

.tv-speaker-grille span {
    display: block;
    height: 4px;
    background: #271C19;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Channels list panels */
.tv-channels-palette {
    width: 260px;
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: var(--radius-card);
    border: 3px solid var(--color-light);
    box-shadow: var(--shadow-clay-card);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.channel-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-btn {
    border: none;
    outline: none;
    background: white;
    padding: 12px 16px;
    border-radius: 16px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.03);
    transition: var(--transition-bounce);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.channel-btn .ch-icon {
    font-size: 1.5rem;
    transition: transform 0.25s ease;
}

.channel-btn:hover {
    transform: translateX(6px);
    background: #FAFAFA;
}

.channel-btn:hover .ch-icon {
    transform: scale(1.2) rotate(-8deg);
}

.channel-btn.active {
    background: #7E57C2;
    color: white;
    border-color: #5E35B1;
    box-shadow: 
        inset 0 -3px 0 rgba(0,0,0,0.15),
        0 6px 10px rgba(126, 87, 194, 0.3);
}


/* --- FOOTER & SECRET PARENTS PANEL --- */
.main-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 20px 0 40px;
    font-size: 1.1rem;
    color: #546E7A;
    z-index: 10;
}

.parents-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.parents-btn {
    border: none;
    outline: none;
    background: transparent;
    color: #90A4AE;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease;
    padding: 6px 12px;
    border-radius: 12px;
}

.parents-btn:hover {
    color: #546E7A;
    background: rgba(0,0,0,0.03);
}

.parents-panel {
    background: #ECEFF1;
    border: 3px solid #CFD8DC;
    border-radius: 20px;
    padding: 20px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.parents-panel h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #37474F;
}

.parents-panel .rec-instruction {
    font-size: 0.95rem;
    color: #607D8B;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 5px;
}

.recording-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.recording-status {
    font-size: 1rem;
    font-weight: 700;
    color: #78909C;
    background: white;
    padding: 6px 16px;
    border-radius: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.recording-status.active {
    color: #FF5252;
    animation: recording-glow 1s infinite alternate ease-in-out;
}

.preview-controls {
    display: flex;
    gap: 10px;
    animation: star-pulse 0.4s ease forwards;
}


/* --- KEYFRAME ANIMATIONS --- */

@keyframes text-jump {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-16px) scale(1.1); }
}

@keyframes float-cloud {
    0% { transform: translateX(0); }
    100% { transform: translateX(120vw); }
}

@keyframes float-bubble {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(-40px) translateX(20px) scale(1.05); }
}

@keyframes animal-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-8deg) scale(1.05); }
    40% { transform: rotate(8deg) scale(1.05); }
    60% { transform: rotate(-5deg) scale(1.02); }
    80% { transform: rotate(5deg) scale(1.02); }
}

@keyframes rise-note {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6) rotate(0);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-150px) scale(1.2) rotate(30deg);
    }
}

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

@keyframes star-pulse {
    0% { transform: scale(0.6); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes heart-shake {
    0% { transform: rotate(-8deg) scale(1); }
    100% { transform: rotate(8deg) scale(1.1); }
}

@keyframes antenna-swing-l {
    0% { transform: rotate(-25deg); }
    100% { transform: rotate(-35deg); }
}

@keyframes antenna-swing-r {
    0% { transform: rotate(35deg); }
    100% { transform: rotate(25deg); }
}

@keyframes static-noise {
    0% { background-position: 0 0; }
    50% { background-position: 10px 20px; }
    100% { background-position: 30px -10px; }
}

@keyframes recording-glow {
    0% { box-shadow: 0 0 0px rgba(255,82,82,0); }
    100% { box-shadow: 0 0 12px rgba(255,82,82,0.6); }
}

/* Responsive Scaling for Tablets and Mobile devices */
@media (max-width: 900px) {
    .game-tabs {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .paint-container {
        flex-direction: column;
    }
    
    .paint-controls {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .tool-section {
        flex: 1 1 40%;
        min-width: 150px;
    }

    .star-academy-grid {
        grid-template-columns: 1fr;
    }

    .academy-card.full-width {
        grid-column: span 1;
    }

    .tv-playground {
        flex-direction: column;
        gap: 20px;
    }

    .tv-channels-palette {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .magic-title {
        font-size: 2.3rem;
    }
    
    .tab-button {
        padding: 10px;
        font-size: 0.95rem;
    }
    
    .tab-button .tab-icon {
        font-size: 1.6rem;
    }
    
    .play-viewport {
        padding: 15px;
    }
    
    .animal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .piano-keyboard {
        gap: 4px;
        height: 180px;
    }
    
    .piano-key {
        padding-bottom: 12px;
    }
    
    .piano-key .key-label {
        font-size: 0.95rem;
    }
    
    .piano-key .key-emoji {
        font-size: 1.25rem;
    }

    .islamic-bar {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .arabic-alphabet-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clickable-count-star {
        font-size: 2.2rem;
    }

    .tv-cabinet {
        width: 100%;
        max-width: 360px;
        height: 250px;
    }

    .tv-antenna {
        top: -45px;
    }

    .tv-controls-bar {
        width: 50px;
    }

    .tv-knob {
        width: 28px;
        height: 28px;
    }
}

/* Premium Father's Signature Badge styling */
.papa-signature-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #37474F;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        0 6px 0 rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    margin-bottom: 5px;
}

.papa-signature-badge b {
    color: #E65100;
    font-weight: 800;
}

.papa-signature-badge:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 
        0 12px 40px rgba(31, 38, 135, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        0 10px 0 rgba(230, 81, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-color: #FFB74D;
}

.papa-signature-badge:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 
        0 4px 10px rgba(31, 38, 135, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.papa-signature-badge .sig-sparkle {
    font-size: 1.3rem;
    animation: sparkle-bounce 1.5s infinite alternate ease-in-out;
}

@keyframes sparkle-bounce {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.7; }
    100% { transform: scale(1.3) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 5px #FFD700); }
}