:root { --magic-pink:#ff7eb9; --magic-purple:#7a51d2; --neon-blue:#00d2ff; --neon-purple:#9d50bb; --seafoam:#7fffd4; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { min-height: 100%; }
        body {
            font-family: 'Quicksand', 'Outfit', sans-serif;
            background: radial-gradient(circle at 30% 20%, #2a0a4a 0%, #0a0a0c 70%);
            color: #fff; min-height: 100vh; min-height: 100dvh;
            -webkit-tap-highlight-color: transparent;
        }

        /* ── Home page ── */
        #home {
            min-height: 100vh; min-height: 100dvh;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            text-align: center; padding: calc(58px + env(safe-area-inset-top)) 18px 32px;
        }
        #home.hidden { display: none; }
        .home-title {
            font-family: 'Fredoka One', cursive;
            font-size: clamp(2.4rem, 11vw, 5rem); line-height: 1.05;
            background: linear-gradient(to right, #00d2ff, #ff7eb9, #9d50bb);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
            margin-bottom: 6px;
        }
        .home-sub { letter-spacing: 5px; text-transform: uppercase; opacity: 0.55; font-size: clamp(0.7rem,2.6vw,0.85rem); margin-bottom: 34px; }
        .home-welcome { font-size: clamp(1rem, 3.2vw, 1.2rem); font-weight: 700; opacity: 0.92; margin-bottom: 14px; text-align: center; }
        .home-tagline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; max-width: 640px; }
        .home-tagline span { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 50px; padding: 6px 14px; font-size: 0.72rem; letter-spacing: 0.02em; opacity: 0.88; white-space: nowrap; }
        @keyframes bannerShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        .home-banner { background: linear-gradient(90deg, var(--magic-pink), var(--magic-purple), var(--neon-blue), var(--magic-pink)); background-size: 300% auto; animation: bannerShimmer 6s linear infinite; border-radius: 16px; padding: 14px 24px; margin-bottom: 30px; font-weight: 800; font-size: clamp(0.85rem, 3vw, 1.02rem); text-align: center; max-width: 640px; width: 100%; box-shadow: 0 8px 26px rgba(122,81,210,0.45); }
        .home-footer { margin-top: 26px; text-align: center; opacity: 0.55; font-size: 0.78rem; line-height: 1.9; }
        .home-footer a { color: inherit; }
        .suggest-bar { margin-top: 30px; }
        .suggest-btn {
            display: inline-block; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.28);
            color: #fff; text-decoration: none; border-radius: 50px; padding: 11px 24px;
            font-weight: 700; font-size: 0.88rem; transition: background 0.2s, transform 0.2s;
        }
        .suggest-btn:hover { background: rgba(255,255,255,0.16); transform: scale(1.04); }
        .game-card.c-spacescientist { font: inherit; color: #fff; text-align: left; cursor: pointer; --card-accent: #16b8ba; }
        .site-link-status { display: inline-block; margin-top: 8px; color: #ffd54f; font-size: .72rem; font-weight: 800; }
        .feedback-panel { width: min(680px, 100%); margin-top: 34px; padding: clamp(20px, 4vw, 32px); border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.07); }
        .feedback-panel h2 { margin: 0 0 8px; font-family: 'Fredoka One', cursive; }
        .feedback-panel form, .feedback-panel label { display: grid; gap: 8px; }
        .feedback-panel form { gap: 15px; margin-top: 18px; }
        .feedback-panel input, .feedback-panel textarea { width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; color: #231238; background: #fff; font: inherit; }
        .feedback-panel textarea { resize: vertical; min-height: 120px; }
        .feedback-panel .feedback-consent { grid-template-columns: 24px 1fr; align-items: start; }
        .feedback-panel .feedback-consent input { width: 20px; margin-top: 2px; }
        .feedback-panel .suggest-btn { justify-self: start; cursor: pointer; }
        #feedback-status { min-height: 1.4em; margin: 0; font-weight: 700; }
        .menu-section-label { width: 100%; max-width: 820px; font-family: 'Fredoka One', cursive; font-size: clamp(1rem, 3vw, 1.2rem); margin: 8px 0 14px; opacity: 0.9; }
        .menu + .menu-section-label { margin-top: 36px; }

        .menu {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px; width: 100%; max-width: 820px;
        }
        .game-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 20px; padding: 22px 16px;
            cursor: pointer; backdrop-filter: blur(8px);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        .game-card:hover, .game-card:active { transform: translateY(-6px); }
        .game-card .emoji { font-size: 2.8rem; }
        .game-card h2 { font-family: 'Fredoka One', cursive; font-size: 1.1rem; }
        .game-card p { opacity: 0.65; font-size: 0.82rem; line-height: 1.4; }

        /* Touch devices struggle when dozens of cards each create a live GPU blur
           layer. Keep the same translucent look without the expensive blur. */
        @media (max-width: 1024px), (hover: none) and (pointer: coarse) {
            .game-card, #top-banner, #music-ctrl, #lang-bar {
                -webkit-backdrop-filter: none;
                backdrop-filter: none;
            }
            .game-card {
                content-visibility: auto;
                contain-intrinsic-size: 150px;
            }
            .home-banner { animation: none; }
        }

        .c-bubble:hover { border-color: var(--magic-pink); box-shadow: 0 10px 32px rgba(255,126,185,0.32); }
        .c-math:hover   { border-color: #ffd166; box-shadow: 0 10px 32px rgba(255,209,102,0.30); }
        .c-hang:hover   { border-color: var(--neon-blue); box-shadow: 0 10px 32px rgba(0,210,255,0.30); }
        .c-match:hover  { border-color: #b388ff; box-shadow: 0 10px 32px rgba(179,136,255,0.30); }
        .c-oly:hover    { border-color: #ffd166; box-shadow: 0 10px 32px rgba(255,209,102,0.32); }
        .c-cross:hover  { border-color: #9dff6b; box-shadow: 0 10px 32px rgba(157,255,107,0.32); }
        .c-wsearch:hover{ border-color: #5be3ff; box-shadow: 0 10px 32px rgba(91,227,255,0.32); }
        .c-prov:hover   { border-color: #d9a441; box-shadow: 0 10px 32px rgba(217,164,65,0.32); }
        .c-days:hover   { border-color: #4fa8e8; box-shadow: 0 10px 32px rgba(79,168,232,0.32); }
        .c-quotes:hover { border-color: #ffcf5c; box-shadow: 0 10px 32px rgba(255,207,92,0.32); }
        .c-ai:hover     { border-color: #00f0ff; box-shadow: 0 10px 32px rgba(0,240,255,0.32); }
        .c-snakeladder:hover { border-color: #ffd166; box-shadow: 0 10px 32px rgba(255,209,102,0.32); }
        .c-tetris:hover { border-color: #c77dff; box-shadow: 0 10px 32px rgba(199,125,255,0.32); }
        .c-snake2d:hover { border-color: #7ee787; box-shadow: 0 10px 32px rgba(126,231,135,0.32); }
        .c-brainolympiad:hover { border-color: #ffe066; box-shadow: 0 10px 32px rgba(255,224,102,0.35); }
        .c-onthisday:hover { border-color: #4fa8e8; box-shadow: 0 10px 32px rgba(79,168,232,0.32); }
        .c-flags:hover { border-color: #5be3ff; box-shadow: 0 10px 32px rgba(91,227,255,0.32); }
        .c-country:hover { border-color: #9dff6b; box-shadow: 0 10px 32px rgba(157,255,107,0.32); }
        .c-inventions:hover { border-color: #ffd166; box-shadow: 0 10px 32px rgba(255,209,102,0.32); }
        .c-body:hover { border-color: #ff6e8e; box-shadow: 0 10px 32px rgba(255,110,142,0.32); }
        .c-space:hover { border-color: #c77dff; box-shadow: 0 10px 32px rgba(199,125,255,0.32); }
        .c-wordpower:hover { border-color: #7fffd4; box-shadow: 0 10px 32px rgba(127,255,212,0.32); }
        .c-wonders:hover { border-color: #ffab5c; box-shadow: 0 10px 32px rgba(255,171,92,0.32); }
        .c-festivals:hover { border-color: #ff9ecb; box-shadow: 0 10px 32px rgba(255,158,203,0.32); }
        .c-timestable:hover { border-color: #ffab5c; box-shadow: 0 10px 32px rgba(255,171,92,0.32); }
        .c-equationbreaker:hover { border-color: #ffd454; box-shadow: 0 10px 32px rgba(255,212,84,0.34); }
        .c-grammarglider:hover { border-color: #42dcf1; box-shadow: 0 10px 32px rgba(66,220,241,0.34); }
        .c-mergelaboratory:hover { border-color: #64e6ae; box-shadow: 0 10px 32px rgba(100,230,174,0.34); }
        .c-circuitconnect:hover { border-color: #ffd454; box-shadow: 0 10px 32px rgba(255,212,84,0.34); }
        .c-rhythmreader:hover { border-color: #bf78ff; box-shadow: 0 10px 32px rgba(191,120,255,0.34); }
        .c-immunedefence:hover { border-color: #64e6ae; box-shadow: 0 10px 32px rgba(100,230,174,0.34); }
        .c-fractionfactory:hover, .c-robotroute:hover { border-color: #ffd454; box-shadow: 0 10px 32px rgba(255,212,84,0.34); }
        .c-spellsprint:hover { border-color: #f279d9; box-shadow: 0 10px 32px rgba(242,121,217,0.34); }
        .c-physicspinball:hover { border-color: #43dcf2; box-shadow: 0 10px 32px rgba(67,220,242,0.34); }
        .c-ecodefence:hover { border-color: #68e5a7; box-shadow: 0 10px 32px rgba(104,229,167,0.34); }
        .c-starshipnav:hover { border-color: #6d91ff; box-shadow: 0 10px 32px rgba(109,145,255,0.34); }
        .c-memory:hover { border-color: #c77dff; box-shadow: 0 10px 32px rgba(199,125,255,0.32); }
        .c-puzzle15:hover { border-color: #4dd9e8; box-shadow: 0 10px 32px rgba(77,217,232,0.32); }
        .c-whack:hover { border-color: #ff6e8e; box-shadow: 0 10px 32px rgba(255,110,142,0.32); }
        .c-maze:hover { border-color: #9dff6b; box-shadow: 0 10px 32px rgba(157,255,107,0.32); }
        .c-factslice:hover { border-color: #c77dff; box-shadow: 0 10px 32px rgba(199,125,255,0.32); }
        .c-wordbuilder:hover { border-color: #4dd9e8; box-shadow: 0 10px 32px rgba(77,217,232,0.32); }
        .c-sortitout:hover { border-color: #ffd166; box-shadow: 0 10px 32px rgba(255,209,102,0.32); }
        .c-runner:hover { border-color: #9dff6b; box-shadow: 0 10px 32px rgba(157,255,107,0.32); }
        .c-tictacquiz:hover { border-color: #5c8dff; box-shadow: 0 10px 32px rgba(92,141,255,0.32); }
        .c-engoly:hover { border-color: #7ee787; box-shadow: 0 10px 32px rgba(126,231,135,0.35); }
        .c-daily:hover { border-color: #ff9ecb; box-shadow: 0 10px 32px rgba(255,158,203,0.35); }
        .c-physics:hover { border-color: #66e0ff; box-shadow: 0 10px 32px rgba(102,224,255,0.35); }
        .c-kgcolors:hover { border-color: #ff7f8f; box-shadow: 0 10px 32px rgba(255,127,143,0.34); }
        .c-kgnumbers:hover { border-color: #ffd34e; box-shadow: 0 10px 32px rgba(255,211,78,0.34); }
        .c-kgalphabet:hover { border-color: #34d6cf; box-shadow: 0 10px 32px rgba(52,214,207,0.34); }

        /* ── Player (holds game iframe) ── */
        :root { --banner-h: 64px; }
        #player { position: fixed; inset: 0; display: none; }
        #player.active { display: block; }
        #game-frame {
            position: absolute; left: 0; right: 0; bottom: 0;
            top: calc(var(--banner-h) + env(safe-area-inset-top));
            width: 100%; height: calc(100% - var(--banner-h) - env(safe-area-inset-top));
            border: 0; display: block;
        }

        /* ── Top banner (every game): Home + motion setting; reserves its own space so it
           never overlaps game content ── */
        #top-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
            height: calc(var(--banner-h) + env(safe-area-inset-top));
            padding: env(safe-area-inset-top) 10px 0; box-sizing: border-box;
            display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
            align-items: center; gap: 8px;
            background: rgba(15,15,20,0.92); backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.14);
        }
        .banner-btn {
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff;
            border-radius: 50px; padding: 8px 14px; font-family: 'Quicksand', sans-serif; font-weight: 700;
            font-size: 0.82rem; cursor: pointer; transition: background 0.2s, transform 0.2s; white-space: nowrap;
        }
        .banner-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
        .home-btn { grid-column: 1; grid-row: 1; justify-self: start; }
        .game-motion-setting { grid-column: 3; grid-row: 1; justify-self: end; }

        /* ── Music control (persistent, shared across Home + every game) ── */
        #music-ctrl {
            position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 100000;
            display: flex; align-items: center; gap: 6px;
            background: rgba(20,20,25,0.82); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.25); border-radius: 50px; padding: 7px 10px;
        }
        #music-ctrl button { background: none; border: none; color: #fff; font-size: 1.05rem; cursor: pointer; padding: 2px 5px; line-height: 1; transition: transform 0.15s; }
        #music-ctrl button:hover { transform: scale(1.15); }

        /* ── Language selector (home screen only) ── */
        #lang-bar {
            position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 100000;
            background: rgba(20,20,25,0.82); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.25); border-radius: 50px; padding: 6px 10px;
            display: flex; align-items: center; gap: 6px;
        }
        #lang-bar .globe { font-size: 0.95rem; }
        #lang-select {
            background: transparent; border: none; color: #fff; font-family: 'Quicksand', sans-serif;
            font-weight: 700; font-size: 0.78rem; cursor: pointer; outline: none;
        }
        #lang-select option { background: #1a1025; color: #fff; }
        #player.active ~ #lang-bar { display: none; }
        /* During play JavaScript moves this same control into the banner. It becomes
           the banner's centre grid cell, so its full touch targets never enter the iframe. */
        #top-banner > #music-ctrl.is-docked {
            position: static; grid-column: 2; grid-row: 1; justify-self: center;
            width: auto; height: 48px; min-height: 48px;
            padding: 1px 6px; transform: none; z-index: auto;
        }
        #music-name { color: rgba(255,255,255,0.7); font-family: 'Quicksand', sans-serif; font-size: 0.68rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* ── Install / PWA ── */
        .install-bar { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
        #install-btn { display: none; align-items: center; gap: 8px; background: linear-gradient(135deg, #00d2ff, #9d50bb); color: #fff; border: none; border-radius: 50px; padding: 14px 32px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 26px rgba(0,210,255,0.35); transition: transform 0.15s, box-shadow 0.15s; }
        #install-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(157,80,187,0.5); }
        #install-btn.show { display: inline-flex; }
        .install-help { background: none; border: none; color: rgba(255,255,255,0.62); text-decoration: underline; cursor: pointer; font-size: 0.85rem; font-family: 'Quicksand', sans-serif; }
        .install-help:hover { color: #fff; }

        #help-modal { position: fixed; inset: 0; background: rgba(5,2,15,0.82); backdrop-filter: blur(6px); display: none; justify-content: center; align-items: center; z-index: 200000; padding: 16px; }
        #help-modal.show { display: flex; }
        .help-box { background: linear-gradient(160deg, #1a0a35, #0a0a0c); border: 1px solid rgba(255,255,255,0.15); border-radius: 22px; max-width: 520px; width: 100%; max-height: 86vh; max-height: 86dvh; overflow-y: auto; padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: left; }
        .help-box h3 { font-family: 'Fredoka One', cursive; font-size: 1.4rem; margin-bottom: 6px; background: linear-gradient(to right, #00d2ff, #ff7eb9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .help-box .intro { font-size: 0.88rem; opacity: 0.8; margin-bottom: 6px; }
        .help-box h4 { margin: 18px 0 6px; font-size: 1rem; color: #7fffd4; }
        .help-box ol { margin: 0 0 4px 20px; }
        .help-box li { font-size: 0.9rem; line-height: 1.55; opacity: 0.88; margin-bottom: 3px; }
        .help-note { font-size: 0.8rem; opacity: 0.6; margin-top: 10px; }
        .help-close { margin-top: 22px; width: 100%; background: linear-gradient(135deg, #7a51d2, #ff7eb9); border: none; color: #fff; border-radius: 14px; padding: 13px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; }
        #data-loading {
            position: fixed; inset: 0; z-index: 300000; display: none;
            align-items: center; justify-content: center; padding: 20px;
            background: rgba(5,2,15,0.88);
        }
        #data-loading.show { display: flex; }
#data-loading span {
            background: #1a0a35; border: 1px solid rgba(255,255,255,0.2);
            border-radius: 18px; padding: 18px 24px; font-weight: 700;
            box-shadow: 0 16px 44px rgba(0,0,0,0.45); text-align: center;
        }

/* ═══════════════════════════════════════════════════════════════
   Edulin Games Version 11 — responsive shell and child UI system
   ═══════════════════════════════════════════════════════════════ */
:root {
    --edu-bg: #12051f;
    --edu-bg-soft: #24103d;
    --edu-surface: #2d1649;
    --edu-surface-strong: #3a1d5d;
    --edu-gold: #ffd54f;
    --edu-aqua: #31d9d2;
    --edu-coral: #ff6f7f;
    --edu-lime: #9adf32;
    --edu-blue: #3b82f6;
    --edu-text: #fffaf0;
    --edu-muted: #d7cae2;
    --edu-line: rgba(255,255,255,.16);
    --edu-radius: 22px;
    --edu-motion-fast: 140ms;
    --edu-motion-normal: 220ms;
    --edu-ease: cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 50% -10%, rgba(100,43,150,.58), transparent 34rem),
        radial-gradient(circle at 8% 30%, rgba(35,185,195,.12), transparent 24rem),
        var(--edu-bg);
    color: var(--edu-text);
    overflow-x: hidden;
}

button, input, select, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, .game-card:focus-visible, .menu-section-label:focus-visible {
    outline: 3px solid var(--edu-gold);
    outline-offset: 3px;
}

#home {
    justify-content: flex-start;
    width: 100%;
    padding: calc(72px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.home-hero {
    width: min(1120px, 100%);
    min-height: 196px;
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    gap: 18px;
    text-align: left;
    margin-bottom: 16px;
    position: relative;
}

.hero-copy { min-width: 0; }
.home-title {
    font-size: clamp(3rem, 8vw, 6.2rem);
    line-height: .96;
    background: linear-gradient(100deg, #fff 12%, #fff 38%, var(--edu-gold) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 4px 0 rgba(0,0,0,.16));
    margin-bottom: 12px;
}
.home-welcome {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.25rem, 3.5vw, 2rem);
    margin: 0 0 18px;
    color: var(--edu-text);
    text-align: left;
}
.home-tagline { justify-content: flex-start; margin-bottom: 0; }
.home-tagline span {
    background: rgba(255,255,255,.08);
    border-color: var(--edu-line);
    padding: 7px 13px;
    font-size: .78rem;
}

.edustar {
    width: 180px;
    aspect-ratio: 1;
    justify-self: end;
    background-image: url('../assets/mascot/edustar-sprites-v10.png');
    background-size: 300% 200%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 16px 20px rgba(0,0,0,.34));
    animation: eduStarFloat 3.4s ease-in-out infinite;
}
.edustar-wave { background-position: 0 0; }
@keyframes eduStarFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.home-banner {
    width: min(1120px, 100%);
    border-radius: 18px;
    margin-bottom: 22px;
    padding: 12px 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,.26);
}

.game-discovery {
    width: min(960px, 100%);
    display: grid;
    gap: 14px;
    margin: 0 auto 10px;
}
.game-search-wrap {
    width: min(700px, 100%);
    margin: 0 auto;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-radius: 18px;
    color: #5b4c68;
    background: #fff;
    border: 2px solid transparent;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.game-search-wrap:focus-within { border-color: var(--edu-gold); }
.game-search-wrap > span { font-size: 1.7rem; line-height: 1; }
#game-search {
    width: 100%;
    min-height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #251334;
    font: 700 1rem 'Quicksand', sans-serif;
}
#game-search::placeholder { color: #73627f; opacity: 1; }

.category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}
.category-btn {
    min-height: 48px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    padding: 10px 17px;
    background: rgba(255,255,255,.075);
    color: var(--edu-text);
    font: 700 .9rem 'Quicksand', sans-serif;
    cursor: pointer;
    transition: transform var(--edu-motion-fast) var(--edu-ease), background var(--edu-motion-fast), border-color var(--edu-motion-fast);
}
.category-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.13); }
.category-btn.active { color: #2a1640; background: var(--edu-gold); border-color: var(--edu-gold); }
.motion-setting[aria-pressed="true"], .game-motion-setting[aria-pressed="true"] { color: #fff; background: #5d397a; }
.filter-status { min-height: 18px; color: var(--edu-muted); font-size: .82rem; }
.home-sub { margin: 4px 0 20px; color: var(--edu-muted); opacity: .82; }

.menu-section-label {
    max-width: 1120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin: 16px 0 14px;
    padding: 10px 2px;
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    cursor: pointer;
}
.menu-section-label::after {
    content: '⌄';
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--edu-line);
    transition: transform var(--edu-motion-normal) var(--edu-ease);
}
.menu-section-label[aria-expanded="false"]::after { transform: rotate(-90deg); }
.menu-section-label.section-empty { display: none; }
.menu + .menu-section-label { margin-top: 34px; }

.menu {
    width: min(1120px, 100%);
    max-width: 1120px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.menu.is-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu[hidden] { display: none !important; }

.game-card {
    --card-accent: #8762d1;
    min-width: 0;
    min-height: 190px;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 22px 16px 20px;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(155deg, color-mix(in srgb, var(--card-accent) 38%, #26113e), #241039 72%);
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
    transition: transform var(--edu-motion-normal) var(--edu-ease), box-shadow var(--edu-motion-normal), border-color var(--edu-motion-normal);
}
.game-card::after {
    content: '';
    position: absolute;
    inset: auto 18% 0;
    height: 3px;
    border-radius: 99px 99px 0 0;
    background: var(--card-accent);
    box-shadow: 0 0 16px var(--card-accent);
    opacity: .72;
}
.game-card:hover, .game-card:active, .game-card:focus-visible {
    transform: translateY(-5px) scale(1.012);
    border-color: color-mix(in srgb, var(--card-accent) 72%, white);
    box-shadow: 0 18px 38px rgba(0,0,0,.28);
}
.game-card .emoji { font-size: clamp(2.35rem, 6vw, 3.3rem); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.game-card h2 { font-size: clamp(.96rem, 2vw, 1.16rem); line-height: 1.12; }
.game-card p { color: var(--edu-muted); opacity: .9; font-size: .79rem; }
.game-card[data-category="olympiads"] { --card-accent: var(--edu-gold); }
.game-card[data-category="knowledge"] { --card-accent: var(--edu-aqua); }
.game-card[data-category="puzzles"] { --card-accent: #9a6cff; }
.game-card[data-category="arcade"] { --card-accent: var(--edu-coral); }
.game-card.c-pathadventures { --card-accent: #ffd43b; background: linear-gradient(155deg, #176da0, #173b74 72%); }
.game-card.c-cosmicacademy { --card-accent: #42dcf1; background: linear-gradient(150deg, #0a4563, #071a35 62%, #35184e); }
.game-card.c-equationbreaker { --card-accent: #ffd454; background: linear-gradient(150deg,#534109,#181f3c 64%); }
.game-card.c-grammarglider { --card-accent: #42dcf1; background: linear-gradient(150deg,#0a4563,#10244b 64%); }
.game-card.c-mergelaboratory { --card-accent: #64e6ae; background: linear-gradient(150deg,#0b4e44,#10243c 64%); }
.game-card.c-circuitconnect { --card-accent: #ffd454; background: linear-gradient(150deg,#4b3910,#132945 64%); }
.game-card.c-rhythmreader { --card-accent: #bf78ff; background: linear-gradient(150deg,#4d246c,#14213f 64%); }
.game-card.c-immunedefence { --card-accent: #64e6ae; background: linear-gradient(150deg,#0d4b44,#132640 64%); }
.game-card.c-fractionfactory { --card-accent:#ffd454; background:linear-gradient(150deg,#5a430b,#15233f 66%); }
.game-card.c-spellsprint { --card-accent:#f279d9; background:linear-gradient(150deg,#63265a,#15223e 66%); }
.game-card.c-physicspinball { --card-accent:#43dcf2; background:linear-gradient(150deg,#075471,#122140 66%); }
.game-card.c-ecodefence { --card-accent:#68e5a7; background:linear-gradient(150deg,#135d43,#14253e 66%); }
.game-card.c-robotroute { --card-accent:#ffd454; background:linear-gradient(150deg,#57430d,#102b48 66%); }
.game-card.c-starshipnav { --card-accent:#6d91ff; background:linear-gradient(150deg,#243b85,#141f42 66%); }
.game-card.c-ecocleanup { --card-accent:#66e5a6; background:linear-gradient(150deg,#17643f,#102c3f 66%); }
.game-card.c-immunetower { --card-accent:#f279d9; background:linear-gradient(150deg,#64225d,#172740 66%); }
.game-card.c-robotfactory { --card-accent:#ffd454; background:linear-gradient(150deg,#654813,#142d42 66%); }
.game-card.c-animalrescue { --card-accent:#ff9966; background:linear-gradient(150deg,#704029,#183445 66%); }
.game-card.c-mysterymap { --card-accent:#46e0f2; background:linear-gradient(150deg,#135b74,#15314a 66%); }
.game-card.c-fractionfood { --card-accent:#ff7580; background:linear-gradient(150deg,#76313e,#1d2e46 66%); }
.game-card.c-planethopper { --card-accent:#46ddf3; background:linear-gradient(150deg,#153d83,#351a68 56%,#10253f); }
.game-card.c-vocabvolcano { --card-accent:#ffb229; background:linear-gradient(150deg,#6e2019,#2c1720 56%,#102b35); }
.game-card.c-typingdefender { --card-accent:#39e8ff; background:linear-gradient(150deg,#103c78,#0a214c 56%,#351d55); }
.game-card.c-pollinator { --card-accent:#ffcf3e; background:linear-gradient(150deg,#4f9c42,#29633b 56%,#78521e); }
.game-card.c-moonbase { --card-accent:#56e2e2; background:linear-gradient(150deg,#123c68,#0b2445 56%,#4a3d62); }
.game-card.c-youngcafe { --card-accent:#ffd05b; background:linear-gradient(150deg,#17684f,#0d4538 56%,#8b5933); }
.game-card.c-weatherstation { --card-accent:#66e0e6; background:linear-gradient(150deg,#176e9e,#0b345f 56%,#10243e); }
.game-card.c-ancientcity { --card-accent:#f1c75b; background:linear-gradient(150deg,#b9683e,#6f3b2b 56%,#17365b); }
.game-card.c-wordconstellation { --card-accent:#ffd36b; background:linear-gradient(150deg,#284c86,#122957 55%,#5a294c); }
.game-card.c-scienceescape { --card-accent:#55e0ee; background:linear-gradient(150deg,#17687a,#07404d 55%,#6f4a24); }
.game-card.c-patternforge { --card-accent:#ffd06a; background:linear-gradient(150deg,#81441f,#3d2520 50%,#075267); }
.game-card.c-storypuzzle { --card-accent:#f3c879; background:linear-gradient(150deg,#563250,#241d3e 52%,#163b58); }
.game-card.c-logicdelivery { --card-accent:#63edc7; background:linear-gradient(150deg,#0a6680,#063d5a 52%,#9a6b1e); }
.kg-menu .game-card { --card-accent: #ffc84b; }
.game-card.is-filtered { display: none !important; }

.home-footer {
    width: min(1120px, 100%);
    margin-top: 38px;
    padding: 22px 16px;
    border-top: 1px solid rgba(255,213,79,.38);
    color: var(--edu-muted);
    opacity: .9;
}
.install-bar, .suggest-bar { position: relative; z-index: 1; }

#top-banner {
    background: rgba(18,5,31,.96);
    border-bottom-color: rgba(255,213,79,.25);
}
.banner-btn { min-height: 42px; }

body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
}
body.performance-lite .game-card { box-shadow: none; }
body.performance-lite .edustar { filter: none; }

@media (max-width: 1024px) {
    .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .menu.is-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    #home { padding-top: calc(66px + env(safe-area-inset-top)); }
    .home-hero {
        min-height: 142px;
        grid-template-columns: 1fr 104px;
        gap: 8px;
    }
    .home-title { font-size: clamp(2.5rem, 13vw, 4rem); }
    .home-welcome { font-size: 1.12rem; margin-bottom: 10px; }
    .home-tagline { gap: 5px; }
    .home-tagline span { padding: 5px 8px; font-size: .64rem; }
    .edustar { width: 104px; }
    .home-banner { font-size: .78rem; padding: 10px 12px; margin-bottom: 16px; }
    .game-search-wrap { min-height: 52px; border-radius: 15px; }
    .category-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: none; }
    .category-filters::-webkit-scrollbar { display: none; }
    .category-btn { min-width: max-content; min-height: 46px; padding: 9px 14px; }
    .menu-section-label { font-size: 1.12rem; margin-top: 12px; }
    .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .menu.is-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-card { min-height: 174px; border-radius: 18px; padding: 16px 10px; gap: 7px; }
    .game-card h2 { font-size: .94rem; }
    .game-card p { font-size: .72rem; line-height: 1.3; }
    #music-name { display: none; }
    .game-motion-setting { width: 44px; padding: 8px; }
    .game-motion-setting span { display: none; }
}

@media (max-width: 420px) {
    .home-btn { width: 44px; padding-inline: 8px; }
    .home-btn .home-label { display: none; }
}

@media (max-width: 340px) {
    .home-hero { grid-template-columns: 1fr 82px; }
    .edustar { width: 82px; }
    .menu, .menu.is-featured { grid-template-columns: 1fr; }
    .game-card { min-height: 150px; }
}

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

/* Version 11 touch targets for persistent controls. */
.install-help {
    min-height: 44px;
    padding: 10px 12px;
}
#music-ctrl button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
}
#lang-select {
    min-height: 44px;
    padding-block: 8px;
}
@media (max-width: 520px) {
    #music-ctrl, #lang-bar { min-height: 48px; padding-block: 2px; }
}

        /* ════════ Version 13 — learner profiles ════════
           Three named learners plus a Guest. The active card scopes every saved score. */
        .profile-strip { width: min(880px, 100%); margin: 4px auto 22px; }
        .profile-strip > p { text-align: center; font-size: 0.82rem; opacity: 0.72; margin: 0 0 10px; }
        .profile-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
        .profile-card { position: relative; display: flex; align-items: stretch; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); overflow: hidden; transition: border-color .16s, transform .16s, box-shadow .16s; }
        .profile-card:hover { transform: translateY(-2px); }
        .profile-card.active { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.28), 0 10px 26px rgba(0,0,0,.3); background: rgba(255,209,102,.12); }
        .profile-pick { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
        .profile-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ff9f45, #ffd166); color: #3a1263; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka One', cursive; font-size: 1rem; }
        .profile-card.guest .profile-avatar { background: rgba(255,255,255,.18); color: #fff; }
        .profile-text { min-width: 0; display: grid; }
        .profile-text b { font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-text small { font-size: 0.7rem; opacity: 0.68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-edit { flex: 0 0 auto; width: 38px; background: rgba(255,255,255,.08); border: none; border-left: 1px solid rgba(255,255,255,.16); color: inherit; font-size: 0.95rem; cursor: pointer; }
        .profile-edit:hover { background: rgba(255,209,102,.24); }

        #profile-dialog { position: fixed; inset: 0; background: rgba(10,4,16,.78); z-index: 220; display: none; align-items: center; justify-content: center; padding: 20px; }
        #profile-dialog.show { display: flex; }
        .profile-box { width: min(400px, 100%); background: #2a0f45; border: 1px solid rgba(255,209,102,.4); border-radius: 22px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
        .profile-box h3 { font-family: 'Fredoka One', cursive; margin: 0 0 4px; color: #ffd166; }
        .profile-box .hint { font-size: 0.78rem; opacity: 0.75; margin: 0 0 16px; line-height: 1.5; }
        .profile-box label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin-bottom: 12px; }
        .profile-box input, .profile-box select { display: block; width: 100%; margin-top: 5px; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255,255,255,.3); background: #fff; color: #231238; font: inherit; font-weight: 700; text-transform: none; letter-spacing: normal; }
        .profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
        .profile-actions button { flex: 1 1 auto; border-radius: 50px; padding: 11px 18px; font: inherit; font-weight: 800; cursor: pointer; border: none; background: linear-gradient(135deg, #ff9f45, #ffd166); color: #3a1263; }
        .profile-actions button.secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; }
        .profile-actions button.danger { background: rgba(255,120,120,.18); border: 1px solid rgba(255,120,120,.5); color: #ffc9c9; }


        /* ════════ Version 13 — compact feedback strip ════════
           One line by default; the email + comment row unfolds only when asked for. */
        .feedback-strip { width: min(680px, 100%); margin: 18px auto 0; text-align: center; }
        .feedback-toggle {
            background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); color: inherit;
            border-radius: 50px; padding: 8px 18px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
        }
        .feedback-toggle:hover { background: rgba(255,255,255,.16); }
        .feedback-strip form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
        .feedback-strip input {
            flex: 1 1 190px; min-width: 0; padding: 10px 12px; border-radius: 10px;
            border: 1px solid rgba(255,255,255,.35); background: #fff; color: #231238; font: inherit; font-size: .86rem;
        }
        .feedback-strip input[name="message"] { flex: 2 1 260px; }
        .feedback-strip form button {
            flex: 0 0 auto; border: none; border-radius: 50px; padding: 10px 20px;
            background: linear-gradient(135deg, #ff9f45, #ffd166); color: #3a1263;
            font: inherit; font-weight: 800; font-size: .84rem; cursor: pointer;
        }
        .feedback-strip #feedback-status { font-size: .78rem; opacity: .82; min-height: 1.1em; margin-top: 8px; }

        /* ════════ Version 13 — EduStar, the talking mascot ════════
           Lives in the shell above the game iframe, so one character follows the child
           through every game. Colour comes from the active learner profile. */
        .edu-mascot {
            position: fixed; right: 14px; bottom: 92px; z-index: 180;
            display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
            --mascot-body: #ffd166; --mascot-glow: #ff9f45;
        }
        .edu-mascot.is-hidden { display: none; }
        .mascot-body {
            pointer-events: auto; width: 76px; height: 82px; padding: 0;
            background: none; border: none; cursor: pointer; order: 2;
            filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
        }
        .mascot-body svg { width: 100%; height: 100%; overflow: visible; }
        .m-shadow { fill: rgba(0,0,0,.28); }
        .m-glow { fill: var(--mascot-glow); opacity: .55; }
        .m-star { fill: var(--mascot-body); }
        .m-eyes ellipse { fill: #2b1a4d; }
        .m-mouth { fill: #2b1a4d; transform-origin: 36px 42px; }
        .m-cheek { fill: rgba(255,120,140,.45); }

        .m-float { animation: mascot-bob 3.4s ease-in-out infinite; transform-origin: 36px 40px; }
        @keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
        .m-eyes { animation: mascot-blink 5.2s steps(1) infinite; transform-origin: 36px 33px; }
        @keyframes mascot-blink { 0%,95%,100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }

        .edu-mascot.is-talking .m-mouth { animation: mascot-talk .26s ease-in-out infinite; }
        @keyframes mascot-talk { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.6); } }
        .edu-mascot.is-happy .mascot-body { animation: mascot-hop .55s ease; }
        @keyframes mascot-hop { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.08); } }
        .edu-mascot.is-oops .mascot-body { animation: mascot-shake .45s ease; }
        @keyframes mascot-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }

        .mascot-bubble {
            order: 1; max-width: min(240px, 46vw); padding: 10px 13px; border-radius: 15px 15px 4px 15px;
            background: #fff; color: #2b1a4d; font-size: .82rem; font-weight: 700; line-height: 1.4;
            box-shadow: 0 8px 22px rgba(0,0,0,.35); opacity: 0; transform: translateY(6px) scale(.94);
            transition: opacity .22s ease, transform .22s ease; pointer-events: none;
        }
        .mascot-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
        .mascot-close {
            order: 3; pointer-events: auto; align-self: flex-start; width: 22px; height: 22px; margin-left: -12px;
            border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(20,10,35,.8);
            color: #fff; font-size: .8rem; line-height: 1; cursor: pointer;
        }
        .mascot-show {
            position: fixed; right: 16px; bottom: 96px; z-index: 180; display: none;
            width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
            border: 1px solid rgba(255,209,102,.5); background: rgba(20,10,35,.85); color: #ffd166; font-size: 1.1rem;
        }
        .mascot-show.show { display: block; }

        @media (max-width: 480px) {
            .edu-mascot { right: 8px; bottom: 78px; }
            .mascot-body { width: 60px; height: 66px; }
            .mascot-bubble { max-width: 52vw; font-size: .76rem; }
        }
        /* Respect the shell's reduced-motion switch. */
        body.reduced-motion .m-float,
        body.reduced-motion .m-eyes,
        body.reduced-motion .edu-mascot.is-talking .m-mouth { animation: none; }
        @media print { .edu-mascot, .mascot-show { display: none !important; } }

        /* Version 13 KG additions */
        .game-card.c-kgshapes    { --card-a:#5ad2e0; --card-b:#2f8fb5; }
        .game-card.c-kgopposites { --card-a:#f7a3c8; --card-b:#c2569b; }
        .game-card.c-kganimals   { --card-a:#9ee493; --card-b:#4a9c58; }
        .game-card.c-kgfood      { --card-a:#ffc06b; --card-b:#e07a3a; }
        .game-card.c-buildmachine { --card-a:#f1b94f; --card-b:#167b83; }
        .game-card.c-teamrelay    { --card-a:#ff655f; --card-b:#168dd6; }
        .game-card.c-knowledgekart { --card-a:#10a79d; --card-b:#f0aa32; }
        .game-card.c-spacerescue { --card-a:#123e68; --card-b:#24d5ea; }
        .game-card.c-vocabvolleyball { --card-a:#10aaa4; --card-b:#ff7f3f; }
        .game-card.c-mathsmarket { --card-a:#18a77c; --card-b:#f3c747; }
        .game-card.c-gameshowbuilder { --card-a:#7357e8; --card-b:#ff6e62; }