:root {
            --sky-blue: #87CEEB;
            --grass-green: #7cfc00;
            --hill-green: #228B22;
            --candy-pink: #FF69B4;
            --candy-orange: #FF8C00;
            --candy-blue: #1E90FF;
            --candy-yellow: #FFD700;
        }
        @keyframes popZoomLoop {
            0%   { transform: scale(1); }
            50%  { transform: scale(1.18); }
            100% { transform: scale(1); }
            }

            .pop-zoom {
            animation: popZoomLoop 0.6s ease-in-out infinite;
            }
        .pop-zoom {
        animation: popZoomLoop 0.9s ease-in-out infinite;
        }

        /* ✅ Clouds moving LEFT ➜ RIGHT with gentle up-down floating */
            @keyframes cloudLeftToRight {
            0%   { transform: translateX(-200px) translateY(0px); }
            25%  { transform: translateX(25vw) translateY(-8px); }
            50%  { transform: translateX(50vw) translateY(0px); }
            75%  { transform: translateX(75vw) translateY(-6px); }
            100% { transform: translateX(calc(100vw + 200px)) translateY(0px); }
            }

            /* ✅ Clouds moving RIGHT ➜ LEFT with gentle up-down floating */
            @keyframes cloudRightToLeft {
            0%   { transform: translateX(calc(100vw + 200px)) translateY(0px); }
            25%  { transform: translateX(75vw) translateY(-8px); }
            50%  { transform: translateX(50vw) translateY(0px); }
            75%  { transform: translateX(25vw) translateY(-6px); }
            100% { transform: translateX(-200px) translateY(0px); }
            }
        /* Dashboard specific overrides */
        body.dashboard-mode {
            background-image: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 50%, #7cfc00 100%) !important;
            font-family: 'Fredoka', sans-serif !important;
            display: block !important;
        }

        .bubble-text { font-family: 'Bubblegum Sans', cursive; }
        
        .hill-bg {
            background: radial-gradient(circle at 50% 100%, #32CD32 0%, #228B22 100%);
            border-radius: 100% 100% 0 0;
        }

        .floating-animal { animation: bounce 3s ease-in-out infinite; }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .candy-button {
            box-shadow: 0 8px 0 rgba(0,0,0,0.1);
            transition: all 0.2s;
            cursor: pointer;
        }
        .candy-button:active {
            box-shadow: 0 2px 0 rgba(0,0,0,0.1);
            transform: translateY(6px);
        }
        .hero-btn { animation: hero-bounce 2s infinite; }
        @keyframes hero-bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0) scale(1);}
            40% {transform: translateY(-15px) scale(1.05);}
            60% {transform: translateY(-7px) scale(1.02);}
        }
        .sun {
            background: radial-gradient(circle, #FFD700 30%, #FFA500 100%);
            box-shadow: 0 0 50px #FFD700;
        }
        .cloud {
            background: white;
            border-radius: 50px;
            position: absolute;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }
        .cloud::before, .cloud::after {
            content: '';
            background: white;
            position: absolute;
            border-radius: 50%;
        }
        /* ✅ Add these 2 blocks */
        .cloud::before {
            width: 60%;
            height: 120%;
            top: -60%;
            left: 10%;
        }
        .cloud::after {
            width: 45%;
            height: 90%;
            top: -40%;
            right: 15%;
        }
        /* --- NEW STYLES FOR POPUPS (MODALS) --- */
        .game-modal {
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
            backdrop-filter: blur(8px);
        }
        .game-modal.active {
            opacity: 1;
            pointer-events: auto;
        }
        .modal-card {
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .game-modal.active .modal-card {
            transform: scale(1);
        }

        /* Tabs for Parents/Teachers Section */
        .tab-btn {
            transition: all 0.2s;
            opacity: 0.6;
        }
        .tab-btn.active {
            opacity: 1;
            transform: scale(1.05);
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
        }
        /* Specific Tab Colors */
        .tab-btn.parents.active { background-color: #FF69B4; color: white; border-color: #d63384; }
        .tab-btn.teachers.active { background-color: #1E90FF; color: white; border-color: #0d6efd; }
        .tab-btn.help.active { background-color: #FFD700; color: #744210; border-color: #ffc107; }

        /* Hide old header ID */
        #headers { display: none; }
         /* Animations */
    @keyframes math-float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
    }
    @keyframes math-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px) rotate(-5deg); }
        75% { transform: translateX(5px) rotate(5deg); }
    }
    @keyframes math-pop {
        0% { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    /* New pulse animation for the final result icon */
    @keyframes math-pulse-glow {
        0% { transform: scale(1); text-shadow: 0 0 10px rgba(255,255,255,0.5); }
        50% { transform: scale(1.1); text-shadow: 0 0 20px rgba(255,255,255,0.8); }
        100% { transform: scale(1); text-shadow: 0 0 10px rgba(255,255,255,0.5); }
    }

    .math-floating { animation: math-float 4s ease-in-out infinite; }
    .math-shake-anim { animation: math-shake 0.4s ease-in-out; }
    .math-pop-anim { animation: math-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
    .math-pulse-anim { animation: math-pulse-glow 2s infinite ease-in-out; }
    
    .candy-btn { transition: all 0.2s; box-shadow: 0 4px 0 #bfdbfe; }
    .candy-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #bfdbfe; }
    body { font-family: 'Fredoka', sans-serif; overflow-x: hidden; }
    .bubble-text { font-family: 'Bubblegum Sans', cursive; }

    .dash-path { stroke-dasharray: 14; animation: dash 60s linear infinite; }
    @keyframes dash { to { stroke-dashoffset: -1200; } }

    .float { animation: float 6s ease-in-out infinite; }
    .float-delay { animation: float 6s ease-in-out infinite; animation-delay: 2.5s; }
    .float-delay2 { animation: float 6s ease-in-out infinite; animation-delay: 4s; }
    @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

    .map-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 30px; }
    .map-stage { width: 1250px; height: 760px; position: relative; margin: 0 auto; }

    @media (max-width: 1280px) { .map-stage { width: 1150px; } }
    @media (max-width: 1100px) { .map-stage { width: 1000px; } }
    @media (max-width: 900px)  { .map-stage { width: 900px; } }

    .home-header {
      position: fixed; top: 24px; left: 0; width: 100%;
      z-index: 60; padding: 0 24px; display: flex; justify-content: center;
    }
    .home-header .header-inner {
      width: 100%; max-width: 80rem; display: flex; align-items: center;
      justify-content: space-between; gap: 18px;
      background: rgba(255,255,255,0.60);
      backdrop-filter: blur(10px);
      border: 4px solid rgba(255,255,255,0.9);
      border-radius: 9999px;
      padding: 14px 18px;
      box-shadow: 0 12px 0 rgba(0,0,0,0.08);
    }
    .home-header .brand { display: flex; align-items: center; gap: 12px; }
    .home-header .logo-circle {
      width: 46px; height: 46px; border-radius: 14px;
      background: linear-gradient(135deg, #FF66B2, #7C4DFF);
      display: flex; align-items: center; justify-content: center;
      color: white; font-weight: 900; font-size: 22px;
      box-shadow: 0 8px 0 rgba(0,0,0,0.10);
    }
    .home-header .title {
      font-family: 'Bubblegum Sans', cursive;
      font-size: 28px; font-weight: 900; color: #3F51B5;
      letter-spacing: 0.5px;
    }
    .home-header .title span { color: #FF4FA3; margin-left: 6px; }

    /* =======================
       ANIMATED CARD STYLES
       ======================= */
    .anim-card {
      width: 260px; border-radius: 24px; position: relative;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 20;
    }
    .anim-card:hover { transform: scale(1.08) translateY(-10px) rotate(1deg); z-index: 50; }

    .card-sea {
      background: linear-gradient(180deg, #4FC3F7 0%, #0277BD 100%);
      border: 4px solid #B3E5FC;
      box-shadow: 0 14px 0 #01579B, 0 20px 20px rgba(0,0,0,0.2);
      overflow: hidden;
    }
    .octopus {
      font-size: 80px; position: absolute; top: -45px; left: 50%;
      transform: translateX(-50%);
      filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2));
      animation: wiggleOctopus 3s ease-in-out infinite;
      z-index: 10;
    }
    @keyframes wiggleOctopus {
      0%, 100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
      50%      { transform: translateX(-50%) rotate(5deg) translateY(-5px); }
    }
    .bubble {
      position: absolute; background: rgba(255,255,255,0.4);
      border-radius: 50%; animation: rise 4s infinite linear;
    }
    @keyframes rise {
      0%   { transform: translateY(0); opacity: 0; }
      50%  { opacity: 1; }
      100% { transform: translateY(-150px); opacity: 0; }
    }

    .card-forest {
      background: linear-gradient(180deg, #AED581 0%, #558B2F 100%);
      border: 4px solid #DCEDC8;
      box-shadow: 0 14px 0 #33691E, 0 20px 20px rgba(0,0,0,0.2);
    }
    .monkey-container {
      position: absolute; top: -50px; left: 50%;
      transform-origin: top center; animation: swingMonkey 3s ease-in-out infinite alternate;
    }
    .monkey-string { width: 2px; height: 30px; background: #5D4037; margin: 0 auto; }
    .monkey { font-size: 70px; line-height: 1; filter: drop-shadow(0 5px 0 rgba(0,0,0,0.2)); }
    @keyframes swingMonkey {
      0%   { transform: translateX(-50%) rotate(5deg); }
      100% { transform: translateX(-50%) rotate(-5deg); }
    }

    .card-mountain {
      background: linear-gradient(180deg, #CFD8DC 0%, #78909C 100%);
      border: 4px solid #ECEFF1;
      box-shadow: 0 14px 0 #455A64, 0 20px 20px rgba(0,0,0,0.2);
    }
    .bear {
      font-size: 70px; position: absolute; top: -45px; left: 50%;
      transform: translateX(-50%);
      animation: peekBear 4s ease-in-out infinite; z-index: 5;
    }
    @keyframes peekBear { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
    .snow-ground { position: absolute; top: 25px; left:0; width: 100%; height: 20px; background: white; border-radius: 50%; z-index: 6; }

    .card-cave {
      background: linear-gradient(180deg, #7E57C2 0%, #4527A0 100%);
      border: 4px solid #D1C4E9;
      box-shadow: 0 14px 0 #311B92, 0 20px 20px rgba(0,0,0,0.2);
    }
    .bat {
      font-size: 70px; position: absolute; top: -40px; left: 50%;
      transform: translateX(-50%) rotate(180deg);
      animation: sleepBat 4s ease-in-out infinite;
      filter: drop-shadow(0 -4px 0 rgba(0,0,0,0.3));
    }
    @keyframes sleepBat {
      0%, 100% { transform: translateX(-50%) rotate(180deg) scale(1); }
      50%      { transform: translateX(-50%) rotate(180deg) scale(1.1); }
    }

    .card-treasure {
      background: linear-gradient(180deg, #FFCA28 0%, #FF6F00 100%);
      border: 4px solid #FFF8E1;
      box-shadow: 0 14px 0 #E65100, 0 20px 20px rgba(0,0,0,0.2);
    }
    .dragon {
      font-size: 80px; position: absolute; top: -50px; left: 50%;
      transform: translateX(-50%);
      animation: breatheDragon 3s ease-in-out infinite;
      filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2));
    }
    @keyframes breatheDragon { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } }
    .fire {
      position: absolute; top: 0; left: 60%; font-size: 20px;
      opacity: 0; animation: firePuff 3s infinite;
    }
    @keyframes firePuff {
      0%, 80% { opacity: 0; transform: translateY(0); }
      90%     { opacity: 1; transform: translateY(-10px); }
      100%    { opacity: 0; transform: translateY(-20px); }
    }

    /* ========= Stars UI ========= */
    .stars {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-top: 8px;
      margin-bottom: 6px;
    }
    .star {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2));
      opacity: 0.35;
      transform: scale(1);
      transition: 0.2s ease;
    }
    .star.filled {
      opacity: 1;
      transform: scale(1.15);
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
    }
    .page-section { display: none; opacity: 0; transition: 0.4s; }
    .page-section.active { display: block; opacity: 1; }
    /* ========= Modal ========= */
    .game-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
    }
    .game-modal.active { display: flex; }
    .modal-card {
      width: 100%;
      max-width: 620px;
      border-radius: 28px;
      background: rgba(255,255,255,0.95);
      border: 4px solid rgba(255,255,255,0.9);
      box-shadow: 0 18px 0 rgba(0,0,0,0.12), 0 30px 40px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .modal-top {
      padding: 18px 18px 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: linear-gradient(90deg, rgba(124,77,255,0.18), rgba(255,79,163,0.18));
    }
    .modal-title {
      font-family: 'Bubblegum Sans', cursive;
      font-size: 26px;
      font-weight: 900;
      color: #3F51B5;
    }
    .modal-body { padding: 16px 18px 18px 18px; }
    .question-box {
      border-radius: 22px;
      background: #ffffff;
      border: 4px solid rgba(63,81,181,0.15);
      box-shadow: 0 10px 0 rgba(0,0,0,0.06);
      padding: 14px;
    }
    .question-text {
      font-size: 22px;
      font-weight: 900;
      color: #1A237E;
      text-align: center;
      margin: 6px 0 12px;
    }
    .opt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 520px){
      .opt-grid{ grid-template-columns: 1fr; }
    }
    .opt-btn{
      border-radius: 18px;
      padding: 12px;
      font-weight: 900;
      border: 4px solid rgba(255,255,255,0.85);
      background: linear-gradient(180deg, #ffffff, #f4f6ff);
      box-shadow: 0 8px 0 rgba(0,0,0,0.10);
      transition: 0.15s ease;
      cursor: pointer;
      user-select: none;
    }
    .opt-btn:hover{ transform: translateY(-2px); }
    .opt-btn:active{ transform: translateY(4px); box-shadow: none; }
    .opt-btn.correct{
      background: linear-gradient(180deg, #C8E6C9, #43A047);
      color: #0B2E13;
    }
    .opt-btn.wrong{
      background: linear-gradient(180deg, #FFCDD2, #E53935);
      color: #330000;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .badge {
      background: rgba(255, 202, 40, 0.22);
      border: 3px solid rgba(255, 202, 40, 0.65);
      padding: 6px 10px;
      border-radius: 9999px;
      font-weight: 900;
      color: #8D6E00;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .big-btn {
      border-radius: 18px;
      padding: 12px 14px;
      font-weight: 900;
      border: 4px solid rgba(255,255,255,0.85);
      background: linear-gradient(180deg, #FFCA28, #FFB300);
      box-shadow: 0 8px 0 rgba(0,0,0,0.12);
      cursor: pointer;
      transition: 0.15s ease;
    }
    .big-btn:hover{ transform: translateY(-2px); }
    .big-btn:active{ transform: translateY(4px); box-shadow: none; }
    .ghost-btn {
      border-radius: 18px;
      padding: 12px 14px;
      font-weight: 900;
      border: 3px solid rgba(63,81,181,0.25);
      background: rgba(63,81,181,0.06);
      color: #1A237E;
      cursor: pointer;
    }

    /* Locked Card Visual */
    .locked { filter: grayscale(0.15); }

    /* ✅ NEW: lock icon top right */
    .lock-icon {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: rgba(0,0,0,0.35);
      border: 3px solid rgba(255,255,255,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 60;
      box-shadow: 0 8px 0 rgba(0,0,0,0.12);
    }
    .lock-icon span{
      color: #fff;
      font-size: 22px;
    }

    .locked-state .lock-icon { display: flex; }
    .locked-state { opacity: 0.85; }


    body { font-family: 'Fredoka', sans-serif; overflow-x: hidden; }
    .bubble-text { font-family: 'Bubblegum Sans', cursive; }

    /* ✅ hide show sections */
    .page-section { display: none; }
    .page-section.active { display: block; }

    /* --- Start Page extra styles (from start.html) --- */
    .dash-path { stroke-dasharray: 14; animation: dash 60s linear infinite; }
    @keyframes dash { to { stroke-dashoffset: -1200; } }

    .float { animation: float 6s ease-in-out infinite; }
    .float-delay { animation: float 6s ease-in-out infinite; animation-delay: 2.5s; }
    .float-delay2 { animation: float 6s ease-in-out infinite; animation-delay: 4s; }
    @keyframes float { 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-10px);} }

    .map-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 30px; }
    .map-stage { width: 1250px; height: 760px; position: relative; margin: 0 auto; }

    @media (max-width: 1280px) { .map-stage { width: 1150px; } }
    @media (max-width: 1100px) { .map-stage { width: 1000px; } }
    @media (max-width: 900px)  { .map-stage { width: 900px; } }

    .home-header {
      position: fixed; top: 24px; left: 0; width: 100%;
      z-index: 60; padding: 0 24px; display: flex; justify-content: center;
    }
    .home-header .header-inner {
      width: 100%; max-width: 80rem; display: flex; align-items: center;
      justify-content: space-between; gap: 18px;
      background: rgba(255,255,255,0.60);
      backdrop-filter: blur(10px);
      border: 4px solid rgba(255,255,255,0.9);
      border-radius: 9999px;
      padding: 14px 18px;
      box-shadow: 0 12px 0 rgba(0,0,0,0.08);
    }
    .home-header .brand { display: flex; align-items: center; gap: 12px; }
    .home-header .logo-circle {
      width: 46px; height: 46px; border-radius: 14px;
      background: linear-gradient(135deg, #FF66B2, #7C4DFF);
      display: flex; align-items: center; justify-content: center;
      color: white; font-weight: 900; font-size: 22px;
      box-shadow: 0 8px 0 rgba(0,0,0,0.10);
    }
    .home-header .title {
      font-family: 'Bubblegum Sans', cursive;
      font-size: 28px; font-weight: 900; color: #3F51B5;
      letter-spacing: 0.5px;
    }
    .home-header .title span { color: #FF4FA3; margin-left: 6px; }

    /* Animated cards */
    .anim-card {
      width: 260px; border-radius: 24px; position: relative;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 20;
    }
    .anim-card:hover { transform: scale(1.08) translateY(-10px) rotate(1deg); z-index: 50; }

    .card-sea {
      background: linear-gradient(180deg, #4FC3F7 0%, #0277BD 100%);
      border: 4px solid #B3E5FC;
      box-shadow: 0 14px 0 #01579B, 0 20px 20px rgba(0,0,0,0.2);
      overflow: hidden;
    }
    .octopus {
      font-size: 80px; position: absolute; top: -45px; left: 50%;
      transform: translateX(-50%);
      filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2));
      animation: wiggleOctopus 3s ease-in-out infinite;
      z-index: 10;
    }
    @keyframes wiggleOctopus {
      0%, 100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
      50%      { transform: translateX(-50%) rotate(5deg) translateY(-5px); }
    }

    .card-forest {
      background: linear-gradient(180deg, #AED581 0%, #558B2F 100%);
      border: 4px solid #DCEDC8;
      box-shadow: 0 14px 0 #33691E, 0 20px 20px rgba(0,0,0,0.2);
    }
    .monkey-container {
      position: absolute; top: -50px; left: 50%;
      transform-origin: top center;
      animation: swingMonkey 3s ease-in-out infinite alternate;
    }
    .monkey-string { width: 2px; height: 30px; background: #5D4037; margin: 0 auto; }
    .monkey { font-size: 70px; line-height: 1; filter: drop-shadow(0 5px 0 rgba(0,0,0,0.2)); }
    @keyframes swingMonkey {
      0%   { transform: translateX(-50%) rotate(5deg); }
      100% { transform: translateX(-50%) rotate(-5deg); }
    }

    .card-mountain {
      background: linear-gradient(180deg, #CFD8DC 0%, #78909C 100%);
      border: 4px solid #ECEFF1;
      box-shadow: 0 14px 0 #455A64, 0 20px 20px rgba(0,0,0,0.2);
    }
    .bear {
      font-size: 70px; position: absolute; top: -45px; left: 50%;
      transform: translateX(-50%);
      animation: peekBear 4s ease-in-out infinite; z-index: 5;
    }
    @keyframes peekBear {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(10px); }
    }
    .snow-ground { position: absolute; top: 25px; left:0; width: 100%; height: 20px; background: white; border-radius: 50%; z-index: 6; }

    .card-cave {
      background: linear-gradient(180deg, #7E57C2 0%, #4527A0 100%);
      border: 4px solid #D1C4E9;
      box-shadow: 0 14px 0 #311B92, 0 20px 20px rgba(0,0,0,0.2);
    }
    .bat {
      font-size: 70px; position: absolute; top: -40px; left: 50%;
      transform: translateX(-50%) rotate(180deg);
      animation: sleepBat 4s ease-in-out infinite;
      filter: drop-shadow(0 -4px 0 rgba(0,0,0,0.3));
    }
    @keyframes sleepBat {
      0%,100% { transform: translateX(-50%) rotate(180deg) scale(1); }
      50% { transform: translateX(-50%) rotate(180deg) scale(1.1); }
    }

    .card-treasure {
      background: linear-gradient(180deg, #FFCA28 0%, #FF6F00 100%);
      border: 4px solid #FFF8E1;
      box-shadow: 0 14px 0 #E65100, 0 20px 20px rgba(0,0,0,0.2);
    }
    .dragon {
      font-size: 80px; position: absolute; top: -50px; left: 50%;
      transform: translateX(-50%);
      animation: breatheDragon 3s ease-in-out infinite;
      filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2));
    }
    @keyframes breatheDragon {
      0%,100% { transform: translateX(-50%) scale(1); }
      50% { transform: translateX(-50%) scale(1.1); }
    }
    .fire { position: absolute; top: 0; left: 60%; font-size: 20px; opacity: 0; animation: firePuff 3s infinite; }
    @keyframes firePuff {
      0%,80% { opacity: 0; transform: translateY(0); }
      90% { opacity: 1; transform: translateY(-10px); }
      100% { opacity: 0; transform: translateY(-20px); }
    }

    /* stars */
    .stars { display:flex; justify-content:center; gap:4px; margin-top:8px; margin-bottom:6px; }
    .star { width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:18px; opacity:0.35; }
    .star.filled { opacity:1; transform: scale(1.15); }

    /* modal for start map */
    .game-modal {
      position: fixed; inset: 0; z-index: 200;
      display: none; align-items: center; justify-content: center;
      padding: 16px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    }
    .game-modal.active { display: flex; }
    .modal-card {
      width: 100%; max-width: 620px;
      border-radius: 28px;
      background: rgba(255,255,255,0.95);
      border: 4px solid rgba(255,255,255,0.9);
      box-shadow: 0 18px 0 rgba(0,0,0,0.12), 0 30px 40px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .modal-top {
      padding: 18px;
      display:flex; align-items:center; justify-content:space-between;
      background: linear-gradient(90deg, rgba(124,77,255,0.18), rgba(255,79,163,0.18));
    }
    .modal-title { font-family:'Bubblegum Sans', cursive; font-size:26px; font-weight:900; color:#3F51B5; }
    .modal-body { padding: 16px 18px 18px; }
    .question-box {
      border-radius: 22px;
      background: #ffffff;
      border: 4px solid rgba(63,81,181,0.15);
      box-shadow: 0 10px 0 rgba(0,0,0,0.06);
      padding: 14px;
    }
    .question-text { font-size:22px; font-weight:900; color:#1A237E; text-align:center; margin: 6px 0 12px; }
    .opt-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    @media(max-width:520px){ .opt-grid { grid-template-columns: 1fr; } }
    .opt-btn {
      border-radius: 18px;
      padding: 12px;
      font-weight: 900;
      border: 4px solid rgba(255,255,255,0.85);
      background: linear-gradient(180deg, #ffffff, #f4f6ff);
      box-shadow: 0 8px 0 rgba(0,0,0,0.10);
      cursor: pointer;
      transition: 0.15s ease;
      user-select: none;
    }
    .opt-btn:hover{ transform: translateY(-2px); }
    .opt-btn:active{ transform: translateY(4px); box-shadow: none; }
    .opt-btn.correct{ background: linear-gradient(180deg, #C8E6C9, #43A047); color:#0B2E13; }
    .opt-btn.wrong{ background: linear-gradient(180deg, #FFCDD2, #E53935); color:#330000; }
    .modal-footer{ display:flex; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }
    .badge {
      background: rgba(255, 202, 40, 0.22);
      border: 3px solid rgba(255, 202, 40, 0.65);
      padding: 6px 10px;
      border-radius: 9999px;
      font-weight: 900;
      color: #8D6E00;
      font-size: 12px;
      display:inline-flex; align-items:center; gap:6px;
    }
    .big-btn{
      border-radius:18px; padding:12px 14px; font-weight:900;
      border:4px solid rgba(255,255,255,0.85);
      background: linear-gradient(180deg, #FFCA28, #FFB300);
      box-shadow: 0 8px 0 rgba(0,0,0,0.12);
      cursor:pointer;
      transition: 0.15s ease;
    }
    .big-btn:hover{ transform: translateY(-2px); }
    .big-btn:active{ transform: translateY(4px); box-shadow:none; }
    .ghost-btn{
      border-radius:18px; padding:12px 14px; font-weight:900;
      border:3px solid rgba(63,81,181,0.25);
      background: rgba(63,81,181,0.06);
      color: #1A237E;
      cursor:pointer;
    }

    .lock-icon {
      position: absolute;
      top: 14px; right: 14px;
      width: 38px; height: 38px;
      border-radius: 14px;
      background: rgba(0,0,0,0.35);
      border: 3px solid rgba(255,255,255,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 60;
      box-shadow: 0 8px 0 rgba(0,0,0,0.12);
    }
    .lock-icon span{ color:#fff; font-size:22px; }
    .locked-state .lock-icon{ display:flex; }
    .locked-state{ opacity:0.85; }
    /* 🔥 Creative Modal Animation */
    .game-modal.active .modal-card {
    animation: popInModal 0.5s ease-out;
    }

    @keyframes popInModal {
    0% { transform: scale(0.6) rotate(-4deg); opacity: 0; }
    70% { transform: scale(1.05) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    /* 🎉 Modal Glow Border */
    .modal-card {
    border: 5px solid rgba(255, 202, 40, 0.8);
    box-shadow: 0 0 25px rgba(255, 202, 40, 0.55),
                0 18px 0 rgba(0,0,0,0.12),
                0 30px 40px rgba(0,0,0,0.35);
    }

    /* ✨ Title fun effect */
    .modal-title {
    animation: titleWiggle 2s infinite ease-in-out;
    }

    @keyframes titleWiggle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-2deg) scale(1.03); }
    }