body {
    background-color: #f0f4f8;
    /* font-family: 'Comic Sans MS', "Comic Sans"; */
    font-family: 'Comic Neue', cursive;
    background-image: url('../img/clip-money-falling.gif');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    margin: 0;
    position: relative; /* Set relative positioning to ensure the pseudo-element works */
}

body::before {
    content: "";
    background-image: url('../img/Flag-Jamaica.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.92; /* Adjust opacity of the flag here */
    z-index: -1; /* Put the flag behind the content */
}

/* For more playful headings */
h1, h2, h3, .font-playful {
    font-family: 'Bubblegum Sans', cursive;
}

/* Make buttons use the playful font */
.btn-primary, .btn-secondary, .btn-success, .match-item, .multiple-choice-btn, #instructionsBtn {
    font-family: 'Bubblegum Sans', cursive !important;
}

.quiz-container {
    max-width: 600px;
    box-shadow: 0 12px 40px rgba(76, 29, 149, 0.25);
    border-radius: 1.5rem;
    overflow: hidden;
    padding: 0 !important;
}

.btn-primary {
    background-color: #2d502c;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #34495e;
    transform: scale(1.05);
}

.avatar-btn.selected {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px #7c3aed, 0 6px 20px rgba(124,58,237,0.35) !important;
    transform: scale(1.07) !important;
}

/* ======================================================
   GAME CARD DESIGN SYSTEM
   ====================================================== */

@keyframes mascotBob {
    from { transform: translateY(0) rotate(-5deg); }
    to   { transform: translateY(-10px) rotate(5deg); }
}

@keyframes btnPulse {
    from { box-shadow: 0 4px 20px rgba(34,197,94,0.45); }
    to   { box-shadow: 0 6px 30px rgba(34,197,94,0.7); }
}

/* Header band */
.game-card-header {
    background: #faf5ff;
    padding: 1.5rem 2rem;
    text-align: center;
    position: relative;
}
.game-card-header .header-logo {
    height: 72px; width: auto; margin: 0 auto 0.75rem; display: block;
}
.game-card-header .header-mascot {
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid #7c3aed;
    animation: mascotBob 0.9s ease-in-out infinite alternate;
    margin: 0 auto 0.5rem; display: block;
}
.game-card-header h1,
.game-card-header .header-title {
    font-family: 'Bubblegum Sans', cursive;
    color: #4c1d95; font-size: 1.8rem; margin: 0;
}
.game-card-header .header-subtitle {
    font-family: 'Comic Neue', cursive;
    color: #6d28d9; font-size: 0.95rem; margin-top: 0.25rem;
}
.game-card-header .mute-btn-wrap {
    position: absolute; top: 1rem; right: 1rem;
}

/* Body area */
.game-card-body {
    background: #faf5ff;
    padding: 1.75rem 2rem 2rem;
}

/* Game buttons */
.btn-play {
    display: block;
    font-family: 'Bubblegum Sans', cursive !important;
    font-size: 1.4rem !important;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.9rem 3rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 20px rgba(34,197,94,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer;
    width: 100%;
    text-align: center;
    text-decoration: none;
    animation: btnPulse 1.6s ease-in-out infinite alternate;
}
.btn-play:hover { transform: scale(1.06) !important; }
.btn-play:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

.btn-game-secondary {
    display: block;
    font-family: 'Bubblegum Sans', cursive !important;
    font-size: 1rem !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 15px rgba(139,92,246,0.35);
    transition: transform 0.15s ease !important;
    cursor: pointer;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
.btn-game-secondary:hover { transform: scale(1.04) !important; }

.btn-game-outline {
    display: block;
    font-family: 'Bubblegum Sans', cursive !important;
    font-size: 1rem !important;
    background: transparent !important;
    color: #6d28d9 !important;
    border: 2px solid #8b5cf6 !important;
    padding: 0.7rem 1.5rem !important;
    border-radius: 9999px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    cursor: pointer;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
.btn-game-outline:hover {
    background: #ede9fe !important;
    transform: scale(1.04) !important;
}

.btn-game-danger {
    display: block;
    font-family: 'Bubblegum Sans', cursive !important;
    font-size: 1rem !important;
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(185,28,28,0.35);
    transition: transform 0.15s ease !important;
    cursor: pointer;
    width: 100%;
}
.btn-game-danger:hover { transform: scale(1.04) !important; box-shadow: 0 6px 18px rgba(185,28,28,0.45) !important; }

/* Game form inputs */
.input-game {
    font-family: 'Comic Neue', cursive !important;
    border: 2px solid #c4b5fd !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background: #fff !important;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: block;
}
.input-game:focus {
    outline: none !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.2) !important;
}

/* === Avatar Character Colours === */
.avatar-budgetman    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.avatar-moneybuilder { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.avatar-questboy     { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.avatar-questgirl    { background: linear-gradient(135deg, #ffe4e6, #fecdd3); }
.avatar-smartspender { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.avatar-supersaver   { background: linear-gradient(135deg, #fef9c3, #fef08a); }

/* === Mobile Responsiveness === */
@media (max-width: 480px) {
    .game-card-header { padding: 1rem 1.25rem; }
    .game-card-header .header-mascot { width: 48px; height: 48px; }
    .game-card-header h1,
    .game-card-header .header-title { font-size: 1.4rem; }
    .game-card-body { padding: 1.25rem 1.25rem 1.5rem; }
}