:root {
            --vh: 100vh;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* Dark background to match hub page */
        }
        /* The game wrapper should take up the full viewport height on mobile */
        #game-wrapper {
            height: 100vh; /* Fallback */
            height: var(--vh);
        }
        /* On larger screens, we constrain the size for a better desktop experience */
        @media (min-width: 1024px) {
            #game-wrapper {
                height: auto;
                max-height: 95vh;
                width: 100%;
                max-width: 28rem; /* 448px */
                border-radius: 1rem;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }

        @keyframes pop {
          0% { transform: scale(1); }
          50% { transform: scale(1.5); }
          100% { transform: scale(1); }
        }

        .pop {
          animation: pop 0.3s ease-out;
        }

        .btn:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease-in-out;
        }
    /* Mobile Responsiveness */
    @media (max-width: 600px) {
        body {
            font-size: 1.1em;
            padding: 10px;
        }
        .container, .game-container, .leaderboard, .progress-bar {
            width: 100%;
            margin: 0;
            padding: 5px;
        }
        .btn {
            font-size: 1em;
            padding: 10px 16px;
        }
        /* Add more responsive styles as needed */
    }

    /* Social Features Button */
    #social-launch-btn {
      box-shadow: 0 4px 16px rgba(128,0,128,0.15);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #social-launch-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 24px rgba(128,0,128,0.25);
    }
    /* Social Modal Styling */
    #social-modal {
      backdrop-filter: blur(2px);
    }
    #social-modal .bg-white {
      border: 2px solid #a78bfa;
    }
    #friend-list, #challenge-list, #chat-section {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }
    #chat-history {
      background: #f3f0ff;
      border: 1px solid #a78bfa;
    }

    /* Mini-game Button */
#minigame-launch-btn {
  box-shadow: 0 4px 16px rgba(0,0,128,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#minigame-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,128,0.25);
}
/* Mini-game Modal Styling */
#minigame-modal {
  backdrop-filter: blur(2px);
}
#minigame-modal .bg-white {
  border: 2px solid #3b82f6;
}
#minigame-content .bg-purple-50 {
  background: #f3f0ff;
}
#minigame-content .bg-blue-50 {
  background: #eff6ff;
}
#minigame-content .bg-green-200 {
  background: #bbf7d0 !important;
}
#minigame-content .bg-red-200 {
  background: #fecaca !important;
}
#minigame-content .bg-yellow-200 {
  background: #fef08a !important;
}

/* Cultural Note Button */
#cultural-note-launch-btn {
  box-shadow: 0 4px 16px rgba(255,140,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#cultural-note-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(255,140,0,0.25);
}
/* Cultural Note Modal Styling */
#cultural-note-modal {
  backdrop-filter: blur(2px);
}
#cultural-note-modal .bg-white {
  border: 2px solid #fb923c;
}

/* Streaks & Badges Button */
#streaks-launch-btn {
  box-shadow: 0 4px 16px rgba(255,215,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#streaks-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(255,215,0,0.25);
}
/* Streaks Modal Styling */
#streaks-modal {
  backdrop-filter: blur(2px);
}
#streaks-modal .bg-white {
  border: 2px solid #fde047;
}

/* Dark Mode Button */
#darkmode-launch-btn {
  box-shadow: 0 4px 16px rgba(40,40,40,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#darkmode-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(40,40,40,0.25);
}
body.dark-mode {
  background: #18181b !important;
  color: #f3f4f6 !important;
}
body.dark-mode .bg-white {
  background: #27272a !important;
  color: #f3f4f6 !important;
}
body.dark-mode .btn {
  background: #444 !important;
  color: #fff !important;
}
/* Accessibility Buttons */
#fontsize-launch-btn, #fontreset-launch-btn {
  box-shadow: 0 4px 16px rgba(34,197,94,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#fontsize-launch-btn:hover, #fontreset-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(34,197,94,0.25);
}

/* Crowdsourcing Button */
#crowdsource-launch-btn {
  box-shadow: 0 4px 16px rgba(236,72,153,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#crowdsource-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(236,72,153,0.25);
}
/* Crowdsourcing Modal Styling */
#crowdsource-modal {
  backdrop-filter: blur(2px);
}
#crowdsource-modal .bg-white {
  border: 2px solid #ec4899;
}

/* Debug Button */
#debug-launch-btn {
  box-shadow: 0 4px 16px rgba(220,38,38,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#debug-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(220,38,38,0.25);
}
/* Debug Modal Styling */
#debug-modal {
  backdrop-filter: blur(2px);
}
#debug-modal .bg-white {
  border: 2px solid #dc2626;
}

/* Knowledgebase Button */
#knowledgebase-launch-btn {
  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#knowledgebase-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(99,102,241,0.25);
}
/* Knowledgebase Modal Styling */
#knowledgebase-modal {
  backdrop-filter: blur(2px);
}
#knowledgebase-modal .bg-white {
  border: 2px solid #6366f1;
}

/* Self-Test Diagnostic Button */
#selftest-launch-btn {
  box-shadow: 0 4px 16px rgba(132,204,22,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#selftest-launch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(132,204,22,0.25);
}

/* Debug Copy Button */
#debug-copy-btn {
  box-shadow: 0 4px 16px rgba(132,204,22,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#debug-copy-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(132,204,22,0.25);
}