/* 
// Extended License
// © 2024 Desktop4Kids All Rights Reserved.
// Licensed for use in one (1) end product that can be sold or used in commercial projects.
// This code can be used to create a product where end users are charged.
// See the CodeCanyon extended license for full details. 
*/

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling with animated numbers and symbols */
body {
    font-family: 'Poppins', sans-serif;
    background: url('assets/backgrounds/bg.png') no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #333;
    overflow: hidden;
}

.custom_logo {
      width: 100px;
    height: 100px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth hover transition */
}

/* Keyframes for falling and rotating effect */
@keyframes fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Styling for falling symbols */
.falling-symbol {
    position: absolute;
    font-size: 2rem;
    color: rgba(56, 56, 56, 0.8); /* Semi-transparent white */
    animation: fall 10s linear infinite;
    z-index: 0; /* Ensure it appears behind the content */
}

/* Set different positions for each symbol */
.falling-symbol:nth-child(1) {
    left: 5%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.falling-symbol:nth-child(2) {
    left: 20%;
    animation-delay: 1s;
    animation-duration: 12s;
}

.falling-symbol:nth-child(3) {
    left: 35%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.falling-symbol:nth-child(4) {
    left: 50%;
    animation-delay: 3s;
    animation-duration: 14s;
}

.falling-symbol:nth-child(5) {
    left: 65%;
    animation-delay: 1.5s;
    animation-duration: 11s;
}

.falling-symbol:nth-child(6) {
    left: 80%;
    animation-delay: 2.5s;
    animation-duration: 13s;
}

.falling-symbol:nth-child(7) {
    left: 95%;
    animation-delay: 0.5s;
    animation-duration: 15s;
}

/* Increase font size for variety */
.falling-symbol.large {
    font-size: 3rem;
}

/* Star Count for Top-Left Positioning */
#star-count {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 3em; /* Increase font size */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it's on top */
}

.star-icon {
    width: 80px; /* Increase star icon size */
    margin-right: 15px;
}

/* Heading */
h1 {
    font-size: 3.2em;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 35px;
    font-weight: 700;
}

/* Keyframes for Colorful Background Animation */
@keyframes colorfulBackground {
    0% {
        background-color: #f4f76e;
    }
    20% {
        background-color: #f48fb1;
    }
    40% {
        background-color: #ce93d8;
    }
    60% {
        background-color: #64b5f6;
    }
    80% {
        background-color: #81c784;
    }
    100% {
        background-color: #f4f76e;
    }
}

/* Main Menu Styling */
#main-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 50px 40px;
    width: 620px;
    text-align: center;
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.411);
    animation: colorfulBackground 10s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

.grades {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 25px 0;
    gap: 10px;
}

/* Button Styling */
button {
    padding: 16px 35px;
    margin: 10px;
    border: none;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

button:active {
    transform: translateY(0);
}

/* Gradient Colors for Grades */
.grade-1 {
    background: linear-gradient(135deg, #FFEE93 0%, #FFCC33 100%);
}

.grade-2 {
    background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 100%);
}

.grade-3 {
    background: linear-gradient(135deg, #FFCDD2 0%, #EF5350 100%);
}

.grade-4 {
    background: linear-gradient(135deg, #E1BEE7 0%, #AB47BC 100%);
}

.grade-5 {
    background: linear-gradient(135deg, #C5CAE9 0%, #3F51B5 100%);
}

.grade-6 {
    background: linear-gradient(135deg, #B0BEC5 0%, #263238 100%);
}

/* Repeat similar styling for the Category Menu */
#category-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 50px 40px;
    width: 620px;
    text-align: center;
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.411);
    display: flex;
    justify-content: center;
    gap: 10px;
    animation: colorfulBackground 10s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

#category-menu button {
    padding: 16px 35px;
    margin: 10px;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.addition {
    background: linear-gradient(135deg, #FFEE93 0%, #FFCC33 100%);
}

.subtraction {
    background: linear-gradient(135deg, #FFCDD2 0%, #EF5350 100%);
}

.multiplication {
    background: linear-gradient(135deg, #C5CAE9 0%, #3F51B5 100%);
}

.division {
    background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 100%);
}

/* Store Section with Scrollable Items */
#store {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 50px;
    width: 620px;
    text-align: center;
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.411);
    max-height: 500px;
    overflow-y: auto;
}

.store-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.store-item {
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.icon-button {
    width: 50px; /* Adjust the size as needed */
    height: 50px;
    display: block;
    margin: 0 auto;
}

.logo-style {
    width: 50px !important;
    height: 50px !important;
    display: block;
    margin: 0 auto;
}

/*@media (max-width: 600px) {*/
/*    .custom_logo {*/
        max-width: 50px; /* smaller on mobile */
/*    }*/
/*}*/

#store-btn {
    display: block;
    margin: 20px auto; /* Center the button horizontally */
    padding: 16px;
    border-radius: 10px;
    text-align: center;
}

/* Home Button Styling */
#home-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: none; /* Hide by default */
}

#home-btn img {
    width: 50px;
    height: 50px;
}

#home-btn:hover {
    transform: scale(1.1); /* Add a zoom effect on hover */
    transition: transform 0.2s ease;
}

/* Back Button Styling */
#back-btn {
    padding: 15px 40px;
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    margin-top: 30px;
}

#back-btn:hover {
    background-color: #357ABD;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

#back-btn:active {
    transform: translateY(0);
}

/* Game Area Styling */
#game-area {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    width: 620px;
    text-align: center;
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.411);
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#question {
    font-size: 4em;  /* Make the question bigger */
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

#answer-input {
    margin: 10px;
    padding: 15px;
    width: 120px;
    font-size: 2em;  /* Bigger input box */
    border: 2px solid #ddd;
    border-radius: 10px;
}

#feedback {
    font-size: 2.5em;
    margin-top: 20px;
    color: red;  /* Default color for incorrect answers */
}

.game-check-btn {
    background-color: #4A90E2;
    color: white;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.5em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.game-check-btn:hover {
    background-color: #357ABD;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* Need Help Button Styling */
.game-help-btn {
    background-color: #f1c40f;
    color: white;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.5em;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.game-help-btn:hover {
    background-color: #d4ac0d;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* Complete Button Styling */
.game-complete-btn {
    background-color: #3498db;
    color: white;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.5em;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.game-complete-btn:hover {
    background-color: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* Modal background */
.modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Modal content box */
  .modal-content {
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    width: 400px;
    max-width: 80%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Modal message text */
  #modal-message {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #333; /* Text color */
  }
  
  /* OK button */
  #modal-ok-btn {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
  }
  
  #modal-ok-btn:hover {
    background-color: #2980b9;
  }

  /* Style for small star icons in store buttons */
.star-icon-small {
    width: 16px; /* Adjust size as needed */
    height: 16px;
    vertical-align: middle; /* Align the star image with text */
    margin-left: 5px; /* Add some spacing */
}

/* Styling for background preview */
.background-preview {
    text-align: center;
    margin-bottom: 15px;
}

.bg-preview {
    width: 200px; /* Adjust the width as needed */
    height: 100px; /* Adjust the height as needed */
    border-radius: 10px;
    border: 2px solid #ccc;
}

/* Avatar selection styling */
#selected-avatar {
    width: 80px;
    height: 80px;
    border: 0px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.avatar-box {
    width: 100%;
    height: 100%;
}

/* Avatar store styling */
#avatar-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.avatar-option {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 2px solid transparent; /* Clear border by default */
    transition: border-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/*.hidden-avatar {*/
/*  display: none !important;*/
/*}*/

.avatar-option:hover {
    transform: scale(1.05); /* Slight scale-up on hover */
}

.avatar-option.selected {
    border-color: #3498db; /* Highlight selected avatar */
    transform: rotate(10deg);
}

/* Greyscale effect for locked avatars */
.locked {
    filter: grayscale(100%);
    opacity: 0.5; /* Reduce opacity for locked avatars */
}

/* Fully visible when unlocked */
.unlocked {
    filter: none;
    opacity: 1;
    cursor: pointer;
}

.avatar-option.unlocked:hover {
    transform: scale(1.1);
    border-color: #2ecc71;
}

/* Adjust avatar sizes on smaller screens */
@media (max-width: 600px) {
    #selected-avatar {
        width: 80px;
        height: 80px;
        top: 100px;
        left: 10px;
    }

    .avatar-option {
        width: 60px;
        height: 60px;
    }
}

/* Grid layout for the background selection */
.background-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images per row */
    gap: 10px;
    margin-top: 10px;
}

/* Background option styling */
.background-option {
    width: 100px;
    height: 100px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth hover transition */
}

.background-option.locked {
    filter: grayscale(100%);
}

.background-option.unlocked {
    opacity: 1;
}

/* Hover effect to make background images grow slightly */
.background-option:hover {
    transform: scale(1.1); /* Slightly increase size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a shadow for better emphasis */
}

.star-icon2 {
    width: 30px; /* Increase star icon size */
    margin-right: 15px;
}

.pet-option {
    width: 80px;
    height: 80px;
    margin: 5px;
    transition: transform 0.2s ease;
}

.pet-option:hover {
    transform: scale(1.1);
}

.pet-box {
    width: 100%;
    height: 100%;
}





/* Pet box styling */
#selected-pet {
    width: 80px;
    height: 80px;
    border: 0px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#selected-items-container {
    position: fixed;
    top: 120px; /* Adjust as necessary */
    left: 5px;
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 20px; /* Space between avatar and pet */
    width: auto;
    height: 100px;
}