:root {
    --kid-ink: #24345b;
    --kid-muted: #667196;
    --kid-blue: #3b82f6;
    --kid-purple: #7c5ce7;
    --kid-coral: #ff6b6b;
    --kid-yellow: #ffd43b;
    --kid-green: #35c98a;
    --kid-sky: #eaf6ff;
    --kid-border: #dbe7ff;
    --kid-shadow: 0 12px 30px rgba(60, 80, 150, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.kids-theme {
    min-height: 100vh;
    margin: 0;
    color: var(--kid-ink);
    font-family: "Nunito", "Baloo 2", sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 212, 59, .22) 0 70px, transparent 72px),
        radial-gradient(circle at 92% 18%, rgba(124, 92, 231, .13) 0 100px, transparent 102px),
        radial-gradient(circle at 6% 86%, rgba(53, 201, 138, .14) 0 110px, transparent 112px),
        linear-gradient(180deg, #f6fbff 0%, #fffdf6 52%, #f7f5ff 100%);
    background-attachment: fixed;
}

.kids-theme h1, .kids-theme h2, .kids-theme h3, .kids-theme h4 {
    color: var(--kid-ink);
    font-family: "Baloo 2", "Nunito", sans-serif;
    line-height: 1.15;
}

.kids-theme a, .kids-theme button, .kids-theme input,
.kids-theme textarea, .kids-theme select { font: inherit; }

.kids-theme a:focus-visible, .kids-theme button:focus-visible,
.kids-theme input:focus-visible, .kids-theme textarea:focus-visible,
.kids-theme select:focus-visible {
    outline: 4px solid rgba(59, 130, 246, .28);
    outline-offset: 3px;
}

.kids-theme .container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.kids-theme .top-bar { background: var(--kid-purple) !important; color: white; }
.kids-theme .top-container { min-height: 44px; padding: 7px 18px; }

.kids-theme .site-header, .kids-theme .header {
    border: 0 !important;
    border-bottom: 4px solid var(--kid-yellow) !important;
    border-radius: 0 0 26px 26px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 24px rgba(55,78,140,.11) !important;
    backdrop-filter: blur(14px);
}

.kids-theme .site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 10px max(5vw, 18px) !important;
}

.kids-theme .site-logo img { height: 72px !important; margin: 0 !important; }
.kids-theme .site-nav, .kids-theme .nav { align-items: center; gap: 9px !important; }

.kids-theme .site-nav a, .kids-theme .nav a {
    padding: 10px 16px !important;
    border-radius: 999px !important;
    color: var(--kid-ink) !important;
    font-weight: 800 !important;
    text-decoration: none;
}

.kids-theme .site-nav a::after { display: none; }
.kids-theme .site-nav a:hover, .kids-theme .site-nav a.active,
.kids-theme .nav a:hover, .kids-theme .nav a.active {
    background: var(--kid-sky) !important;
    color: #175bb8 !important;
    transform: translateY(-2px);
}

.kids-theme .site-nav .header-dashboard {
    background: var(--kid-coral) !important;
    color: white !important;
    box-shadow: 0 4px 0 #d94f4f;
}

.kids-theme .site-nav .header-dashboard:hover {
    background: #ff7b72 !important;
    color: white !important;
}

.kids-theme .menu-btn {
    width: 48px; height: 48px; border: 0; border-radius: 16px;
    background: var(--kid-yellow) !important;
    color: var(--kid-ink) !important;
    font-size: 25px; font-weight: 900;
}

.kids-theme .btn-gold, .kids-theme .btn-outline, .kids-theme .btn-premium,
.kids-theme .btn, .kids-theme .login-btn, .kids-theme .register-btn {
    min-height: 48px;
    padding: 12px 22px !important;
    border: 3px solid transparent !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--kid-coral), #ff8b64) !important;
    box-shadow: 0 7px 0 #d94f4f, 0 12px 22px rgba(255,107,107,.2) !important;
    color: white !important;
    font-weight: 900 !important;
    text-decoration: none;
    transition: transform .18s ease !important;
}

.kids-theme .btn-outline {
    border-color: rgba(255,255,255,.8) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.kids-theme .btn-gold {
    background: var(--kid-yellow) !important;
    box-shadow: none !important;
    color: var(--kid-ink) !important;
}

.kids-theme .btn-gold:hover, .kids-theme .btn-outline:hover,
.kids-theme .btn-premium:hover, .kids-theme .btn:hover {
    transform: translateY(-3px) !important;
}

.kids-theme .hero, .kids-theme .dashboard-header, .kids-theme .chapter-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 24%, rgba(255,255,255,.23) 0 55px, transparent 57px),
        radial-gradient(circle at 87% 72%, rgba(255,212,59,.42) 0 90px, transparent 92px),
        linear-gradient(135deg, #3b82f6 0%, #6d63e7 58%, #9b5de5 100%) !important;
    color: white !important;
    box-shadow: var(--kid-shadow) !important;
}

.kids-theme .hero {
    min-height: 430px !important;
    padding: 70px 20px !important;
    border-radius: 0 0 42px 42px !important;
}

.kids-theme .hero::before, .kids-theme .hero::after { display: none !important; }
.kids-theme .hero h1, .kids-theme .hero h2, .kids-theme .hero h3,
.kids-theme .dashboard-header h2, .kids-theme .dashboard-header p,
.kids-theme .chapter-header h2, .kids-theme .chapter-header p { color: white !important; }

.kids-theme .hero h1 {
    max-width: 880px; margin: 0 auto 16px !important;
    font-size: clamp(38px, 6vw, 68px) !important;
}
.kids-theme .hero h2 { font-size: clamp(21px, 3vw, 31px) !important; }
.kids-theme .hero p {
    max-width: 720px; margin: 18px auto 30px;
    font-size: clamp(17px, 2vw, 21px); line-height: 1.65;
}

.kids-theme .eyebrow, .kids-theme .header-badge, .kids-theme .badge {
    display: inline-flex !important;
    align-items: center;
    min-height: 38px;
    padding: 7px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--kid-yellow) !important;
    color: var(--kid-ink) !important;
    font-weight: 900 !important;
}

.kids-theme .section { padding: 70px 20px !important; }
.kids-theme .section-title, .kids-theme .text-section h2 {
    color: var(--kid-purple) !important;
    font-size: clamp(32px, 4vw, 46px) !important;
}
.kids-theme .text-section p, .kids-theme .content-card p, .kids-theme .content-card li {
    color: var(--kid-muted) !important;
    font-size: 18px;
}
.kids-theme .features { gap: 22px !important; }

.kids-theme .feature, .kids-theme .content-card, .kids-theme .card,
.kids-theme .module, .kids-theme .chart-box, .kids-theme .heatmap-box,
.kids-theme .login-card, .kids-theme .register-card {
    border: 3px solid var(--kid-border) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: var(--kid-shadow) !important;
}

.kids-theme .feature { min-height: 210px; padding: 30px 22px !important; }
.kids-theme .feature:nth-child(4n + 1) { border-top: 8px solid var(--kid-blue) !important; }
.kids-theme .feature:nth-child(4n + 2) { border-top: 8px solid var(--kid-yellow) !important; }
.kids-theme .feature:nth-child(4n + 3) { border-top: 8px solid var(--kid-green) !important; }
.kids-theme .feature:nth-child(4n + 4) { border-top: 8px solid var(--kid-coral) !important; }
.kids-theme .feature:hover, .kids-theme .card:hover, .kids-theme .chapter:hover {
    transform: translateY(-6px) !important;
}
.kids-theme .feature i { color: var(--kid-purple) !important; font-size: 46px !important; }
.kids-theme .feature h4 { color: var(--kid-ink) !important; font-size: 25px !important; }

.kids-theme .content-media img {
    border: 8px solid white !important;
    border-radius: 30px !important;
    box-shadow: var(--kid-shadow);
}

.kids-theme .cta {
    width: min(1000px, calc(100% - 32px));
    margin: 45px auto !important;
    padding: 60px 24px !important;
    border-radius: 34px !important;
    background: linear-gradient(135deg, #ffe66d, #ffcf56) !important;
    color: var(--kid-ink) !important;
}
.kids-theme .cta h2, .kids-theme .cta p { color: var(--kid-ink) !important; }

.kids-theme .site-footer, .kids-theme .footer {
    border-radius: 38px 38px 0 0 !important;
    background: #263563 !important;
    color: #eaf0ff !important;
}
.kids-theme .site-footer h3, .kids-theme .footer h3 { color: white !important; }
.kids-theme .site-footer a { color: #dce7ff !important; }
.kids-theme .footer-bottom { background: #1c294f !important; color: #dce7ff !important; }

.kids-theme .content-box {
    overflow: visible !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
.kids-theme .dashboard-header, .kids-theme .chapter-header { border-radius: 34px !important; }
.kids-theme .card h3, .kids-theme .chapter h4, .kids-theme .module-title h3,
.kids-theme .page-header h1, .kids-theme .translation-title { color: var(--kid-purple) !important; }
.kids-theme .stat { color: var(--kid-coral) !important; }
.kids-theme .progress-bar, .kids-theme .module-progress-bar {
    background: linear-gradient(90deg, var(--kid-blue), var(--kid-purple)) !important;
}
.kids-theme .chapter.completed, .kids-theme .completed {
    background: linear-gradient(145deg, #46d99c, #28ad78) !important; color: white !important;
}
.kids-theme .chapter.active, .kids-theme .active {
    background: linear-gradient(145deg, #ffe66d, #ffc83d) !important; color: var(--kid-ink) !important;
}
.kids-theme .chapter.locked, .kids-theme .locked {
    border: 3px dashed #bdc9e1 !important; background: #eff3fa !important; color: #8290aa !important;
}
.kids-theme .kids-page {
    border: 5px solid var(--kid-purple) !important;
    box-shadow: 0 0 0 10px #e9e5ff, var(--kid-shadow) !important;
}
.kids-theme .quran-box { border: 4px dashed var(--kid-yellow) !important; background: #fffdf5 !important; }
.kids-theme .translation-box { border: 3px solid #bcefdc !important; background: #effcf7 !important; }
.kids-theme .next-btn { background: var(--kid-green) !important; }
.kids-theme .prev-btn { background: #ffe0e0 !important; color: #a53b4b !important; }

.kids-theme .form-field input, .kids-theme .form-field textarea,
.kids-theme input[type="text"], .kids-theme input[type="email"],
.kids-theme input[type="password"], .kids-theme select, .kids-theme textarea {
    width: 100%; min-height: 52px;
    padding: 13px 16px !important;
    border: 3px solid var(--kid-border) !important;
    border-radius: 15px !important;
    background: white !important; color: var(--kid-ink) !important;
}
.kids-theme input:focus, .kids-theme textarea:focus, .kids-theme select:focus {
    border-color: var(--kid-blue) !important;
    box-shadow: 0 0 0 5px rgba(59,130,246,.13) !important;
}
.kids-theme label { color: var(--kid-ink) !important; font-weight: 800 !important; }
.kids-theme .login-card, .kids-theme .register-card { border-top: 9px solid var(--kid-yellow) !important; }

.kids-theme .quiz-shell { max-width: 900px; margin: 20px auto; }
.kids-theme .quiz-hero {
    margin-bottom: 24px; padding: 30px; border-radius: 28px;
    background: linear-gradient(135deg, var(--kid-blue), var(--kid-purple));
    color: white; text-align: center;
}
.kids-theme .quiz-hero h1, .kids-theme .quiz-hero p { color: white; }
.kids-theme .quiz-question {
    margin-bottom: 22px; padding: 25px;
    border: 3px solid var(--kid-border); border-radius: 24px;
    background: white; box-shadow: 0 8px 22px rgba(60,80,150,.09);
}
.kids-theme .quiz-question h3 { margin-top: 0; }
.kids-theme .quiz-option {
    display: flex !important; align-items: center; gap: 12px;
    margin-top: 11px; padding: 13px 15px;
    border: 2px solid #e4ebfa; border-radius: 14px;
    background: #f9fbff; cursor: pointer;
}
.kids-theme .quiz-option:hover { border-color: var(--kid-blue); background: var(--kid-sky); }
.kids-theme .quiz-option input { width: 20px !important; min-height: 20px !important; }

@media (max-width: 900px) {
    .kids-theme .site-header { flex-wrap: wrap; }
    .kids-theme .site-nav { order: 3; }
}

@media (max-width: 768px) {
    .kids-theme .site-logo img { height: 58px !important; }
    .kids-theme .site-nav, .kids-theme .nav {
        width: 100%; padding: 14px !important;
        border: 3px solid var(--kid-border); border-radius: 20px;
        background: white !important;
    }
    .kids-theme .site-nav a, .kids-theme .nav a { width: 100%; text-align: center; }
    .kids-theme .hero { min-height: 390px !important; border-radius: 0 0 28px 28px !important; }
    .kids-theme .section { padding: 48px 16px !important; }
    .kids-theme .split-section, .kids-theme .contact-grid { gap: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Modern icon-first public experience */
.kids-theme .top-bar { display: none; }

.kids-theme .site-header {
    position: sticky;
    top: 12px;
    z-index: 1000;
    width: min(1180px, calc(100% - 28px));
    margin: 12px auto 0;
    padding: 9px 14px !important;
    border: 2px solid rgba(219, 231, 255, .9) !important;
    border-radius: 24px !important;
}

.kids-theme .site-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.flower-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}
.flower-logo-image {
    display: block;
    width: auto;
    height: 54px;
    object-fit: contain;
}
.flower-symbol {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    transform: rotate(45deg);
}
.flower-symbol i {
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 14px 14px 5px;
    background: var(--kid-purple);
}
.flower-symbol i:nth-child(1) { top: 1px; left: 1px; background: var(--kid-coral); }
.flower-symbol i:nth-child(2) { top: 1px; right: 1px; background: var(--kid-yellow); }
.flower-symbol i:nth-child(3) { right: 1px; bottom: 1px; background: var(--kid-green); }
.flower-symbol i:nth-child(4) { bottom: 1px; left: 1px; background: var(--kid-blue); }
.flower-symbol b {
    position: absolute;
    inset: 17px;
    z-index: 2;
    border-radius: 50%;
    background: white;
}
.flower-wordmark {
    color: var(--kid-purple);
    font-family: "Baloo 2", sans-serif;
    font-size: 23px;
    font-weight: 800;
    line-height: .85;
}
.flower-wordmark small {
    display: block;
    color: var(--kid-ink);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.play-home, .icon-page { padding: 38px 0 75px; }

.play-hero {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    min-height: 480px;
    overflow: hidden;
    padding: 48px 6%;
    border: 3px solid white;
    border-radius: 42px;
    background:
        radial-gradient(circle at 9% 14%, rgba(255,255,255,.7) 0 15px, transparent 17px),
        radial-gradient(circle at 84% 14%, rgba(255,212,59,.55) 0 28px, transparent 30px),
        linear-gradient(135deg, #eff8ff 0%, #f1efff 52%, #fff7db 100%);
    box-shadow: var(--kid-shadow);
}

.play-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 99px;
    background: white;
    color: var(--kid-purple);
    box-shadow: 0 7px 20px rgba(60,80,150,.1);
    font-weight: 900;
}

.play-hero h1 {
    margin: 20px 0 26px;
    font-size: clamp(48px, 6vw, 78px);
    letter-spacing: -.04em;
}
.play-hero h1 span { color: var(--kid-purple); }
.play-actions { display: flex; flex-wrap: wrap; gap: 13px; }

.play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 13px 22px;
    border: 0;
    border-radius: 17px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}
.play-button-primary {
    background: var(--kid-coral);
    box-shadow: 0 6px 0 #d94f4f;
    color: white;
}
.play-button-soft { background: white; color: var(--kid-purple); }
.play-button:hover { transform: translateY(-2px); }

.play-orbit {
    position: relative;
    width: min(430px, 100%);
    aspect-ratio: 1;
    margin: auto;
    border: 4px dashed rgba(124,92,231,.18);
    border-radius: 50%;
}

.orbit-center, .orbit-item {
    position: absolute;
    display: grid;
    place-items: center;
    border: 5px solid white;
    box-shadow: 0 12px 25px rgba(60,80,150,.16);
}
.orbit-center {
    inset: 50% auto auto 50%;
    width: 145px;
    height: 145px;
    border-radius: 42px;
    background: linear-gradient(145deg, var(--kid-purple), #a47cf3);
    color: white;
    font-size: 62px;
    transform: translate(-50%, -50%) rotate(-6deg);
}
.orbit-item {
    width: 105px;
    height: 105px;
    border-radius: 30px;
    color: var(--kid-ink);
    font-size: 28px;
}
.orbit-item span { font-size: 13px; font-weight: 900; }
.orbit-blue { top: -8px; left: 38%; background: #cfeaff; transform: rotate(5deg); }
.orbit-yellow { top: 36%; right: -10px; background: #ffe995; transform: rotate(8deg); }
.orbit-green { bottom: -8px; left: 38%; background: #c8f5df; transform: rotate(-5deg); }
.orbit-coral { top: 36%; left: -10px; background: #ffd4d4; transform: rotate(-8deg); }

.quick-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 22px;
    background: white;
    box-shadow: 0 8px 22px rgba(60,80,150,.09);
}
.quick-strip div { padding: 12px; text-align: center; }
.quick-strip strong { display: block; color: var(--kid-purple); font-size: 25px; }
.quick-strip span { color: var(--kid-muted); font-size: 12px; font-weight: 800; }

.play-section { padding-top: 65px; }
.play-title { margin-bottom: 20px; }
.play-title span, .compact-hero small, .mini-board small, .play-cta small,
.info-tile span, .path-card small, .contact-action small {
    color: var(--kid-muted);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.play-title h2, .mini-board h2, .play-cta h2 { margin: 2px 0 0; font-size: 34px; }

.zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.zone-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 145px;
    padding: 22px;
    border: 4px solid white;
    border-radius: 30px;
    color: var(--kid-ink);
    box-shadow: var(--kid-shadow);
    text-decoration: none;
    transition: transform .2s ease;
}
.zone-card:hover { transform: translateY(-6px) rotate(-1deg); }
.zone-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 20px;
    background: white;
    font-size: 29px;
}
.zone-card h3 { margin: 2px 0 0; font-size: 24px; }
.zone-card small { font-weight: 900; }
.zone-arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
}
.zone-blue { background: #cfeaff; }
.zone-yellow { background: #ffe995; }
.zone-green { background: #c8f5df; }

.mini-board {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    gap: 25px;
    padding: 28px;
    border-radius: 34px;
    background: #292f57;
    color: white;
    box-shadow: var(--kid-shadow);
}
.mini-board h2, .mini-board small { color: white; }
.mini-board-title { display: flex; align-items: center; gap: 15px; }
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.step-row div {
    position: relative;
    display: grid;
    min-height: 120px;
    place-items: center;
    padding: 16px 8px;
    border-radius: 23px;
    background: rgba(255,255,255,.1);
}
.step-row b {
    position: absolute;
    top: 9px;
    left: 11px;
    color: var(--kid-yellow);
}
.step-row i { font-size: 28px; }
.step-row span { font-size: 13px; font-weight: 900; }

.play-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 65px;
    padding: 25px 28px;
    border: 4px solid white;
    border-radius: 30px;
    background: linear-gradient(135deg, #ffe995, #ffd1d1);
    box-shadow: var(--kid-shadow);
}
.play-cta-icon, .compact-hero-icon {
    display: grid;
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 22px;
    background: white;
    color: var(--kid-purple);
    font-size: 30px;
}
.play-cta .play-button { margin-left: auto; }

.compact-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding: 30px;
    border-radius: 32px;
    background: linear-gradient(135deg, #ebe7ff, #e7f6ff);
}
.compact-hero h1 { margin: 2px 0 0; font-size: clamp(38px, 5vw, 58px); }

.info-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
}
.info-tile {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    border: 4px solid white;
    border-radius: 30px;
    box-shadow: var(--kid-shadow);
}
.info-tile > i { margin-bottom: auto; font-size: 38px; }
.info-tile h2, .info-tile h3 { margin: 10px 0 2px; }
.tile-large { grid-row: span 2; min-height: 396px; }
.tile-large > i { font-size: 76px; }
.tile-purple { background: #dcd4ff; }
.tile-blue { background: #cfeaff; }
.tile-yellow { background: #ffe995; }
.tile-green { background: #c8f5df; }
.tile-coral { background: #ffd4d4; }

.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.path-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    padding: 25px;
    border: 4px solid white;
    border-radius: 32px;
    box-shadow: var(--kid-shadow);
}
.path-card > i { margin: 70px 0 30px; font-size: 54px; }
.path-card h2 { margin: 0; font-size: 27px; }
.path-number {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 24px;
    font-weight: 900;
    opacity: .45;
}
.path-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.path-tags span { padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.65); font-size: 11px; font-weight: 900; }
.path-blue { background: #cfeaff; }
.path-yellow { background: #ffe995; }
.path-green { background: #c8f5df; }
.path-purple { background: #dcd4ff; }

.contact-modern { display: grid; grid-template-columns: 290px 1fr; gap: 20px; }
.contact-actions { display: grid; gap: 12px; }
.contact-action {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 115px;
    padding: 18px;
    border: 4px solid white;
    border-radius: 26px;
    color: var(--kid-ink);
    box-shadow: 0 8px 22px rgba(60,80,150,.09);
    text-decoration: none;
}
.contact-action > i { width: 48px; font-size: 28px; text-align: center; }
.contact-action strong { display: block; margin-top: 3px; }
.action-blue { background: #cfeaff; }
.action-yellow { background: #ffe995; }
.action-green { background: #c8f5df; }
.message-card {
    padding: 26px;
    border: 3px solid var(--kid-border);
    border-radius: 30px;
    background: white;
    box-shadow: var(--kid-shadow);
}
.message-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.message-title i { color: var(--kid-purple); font-size: 27px; }
.message-title h2 { margin: 0; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.compact-form .form-field { margin-bottom: 13px; }
.compact-form textarea { min-height: 105px; }

.modern-footer {
    display: flex;
    align-items: center;
    gap: 25px;
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto 14px;
    padding: 14px 18px;
    border-radius: 24px;
    background: #292f57;
    color: white;
}
.footer-brand { display: flex; align-items: center; gap: 8px; color: white; text-decoration: none; }
.modern-footer .flower-logo-image { height: 42px; }
.modern-footer .flower-wordmark { color: white; font-size: 18px; }
.modern-footer .flower-wordmark small { color: #dce4ff; font-size: 9px; }
.modern-footer nav { display: flex; gap: 8px; margin-left: auto; }
.modern-footer nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-weight: 800;
}
.modern-footer nav a:hover { background: rgba(255,255,255,.12); }
.footer-copy { color: #bfc9eb; font-size: 12px; }

@media (max-width: 900px) {
    .play-hero { grid-template-columns: 1fr; gap: 45px; text-align: center; }
    .play-actions { justify-content: center; }
    .play-orbit { width: min(370px, 90%); }
    .zone-grid, .path-grid { grid-template-columns: 1fr 1fr; }
    .mini-board { grid-template-columns: 1fr; }
    .info-bento { grid-template-columns: 1fr 1fr; }
    .tile-large { grid-row: auto; min-height: 190px; }
    .contact-modern { grid-template-columns: 1fr; }
    .contact-actions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 650px) {
    .kids-theme .site-header .flower-wordmark { display: none; }
    .play-home, .icon-page { padding-top: 22px; }
    .play-hero { min-height: auto; padding: 40px 20px; border-radius: 30px; }
    .play-orbit { transform: scale(.86); margin-block: -25px; }
    .quick-strip { grid-template-columns: repeat(2, 1fr); }
    .quick-strip div:nth-child(odd) { border-right: 1px solid var(--kid-border); }
    .zone-grid, .path-grid, .info-bento { grid-template-columns: 1fr; }
    .path-card { min-height: 250px; }
    .path-card > i { margin: 45px 0 22px; }
    .step-row { grid-template-columns: 1fr 1fr; }
    .play-cta { align-items: flex-start; flex-wrap: wrap; }
    .play-cta .play-button { width: 100%; margin-left: 0; }
    .contact-actions, .form-pair { grid-template-columns: 1fr; }
    .modern-footer { justify-content: center; }
    .footer-brand strong, .footer-copy { display: none; }
    .modern-footer nav { margin-left: 0; }
    .modern-footer nav a { flex-direction: column; font-size: 10px; }
}