@font-face {
    font-family: 'Insaniburger';
    src: url('../fonts/Insanibu.ttf') format('truetype');
}
@font-face {
    font-family: 'Bunny';
    src: url('../fonts/SmallBunnyRegular.woff') format('woff');
}
@font-face {
    font-family: 'Mont';
    src: url('../fonts/Mont-ExtraLightDEMO.otf') format('otf');
}

html, body {
    /* overflow: hidden; */
    height: 100%;
}
body {
    background: rgb(255,249,175);
    background: -moz-radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
    background: -webkit-radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
    background: radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff9af",endColorstr="#f48fff",GradientType=1);
    height: 100%;
}
#grid {
    position: relative;
    width: 100%; /* Full container width by default */
    height: calc(100% - 75px); 
    margin: 75px auto 0;
    margin-top: 125px;
    display: block;
    padding: 1%; 
}

@media (max-width: 375px) {
    #grid {
        margin: 40px auto 0; 
        margin-top: 80px;
        height: auto; 
    }
}

@media (max-width: 768px) {
    #grid {
        margin: 50px auto 0; 
        margin-top: 80px;
        height: auto; 
    }
}

.candy {
    position: absolute;
    width: 86.6px; /* Approx hex width for size 50 */
    height: 100px; /* Hex height for size 50 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.08s;
}
.candy img {
    max-width: 70%;
    max-height: 70%;
}
.candy.selected {
    transform: scale(0.8);
}
.candy.selected::before {
    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 64px;
    background-color: rgba(255, 255, 255, 0.33);
}
.center-position {
    position: fixed;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -51%);
    text-align: center;
}
@keyframes wobble {
    0% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-2deg) scale(1.05);
    }
    30% {
        transform: rotate(2deg) scale(1);
    }
    45% {
        transform: rotate(1deg) scale(1.05);
    }
    60% {
        transform: rotate(-1deg) scale(1);
    }
    75% {
        transform: rotate(-2deg) scale(1.05);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}
  
.wobble-wobble {
    display: inline-block;
    animation: wobble 12s infinite;
}
/* Button Styling */
.start-menu-btn {
    border-radius: 16px;
    width: clamp(200px, 275px, 375px);
    padding: 8px;
    margin-top: 12px;
    font-size: 32px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #3e0219;
    border-style: solid;
    background-color: #f975c0;
    color: gold;
    font-family: 'Insaniburger';
    letter-spacing: 3px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Hover effect for Play and Leaderboard buttons */
.start-menu-btn:hover {
    background-color: rgba(227, 119, 219, 0.7); /* Slightly darker pink */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Soft shadow on hover */
    transform: translateY(-5px); /* Slight lift effect */
    animation: bounce 0.5s infinite alternate; /* Add bounce effect */
}

.start-menu-footer {
    position: absolute;
    width: clamp(200px, 275px, 375px);
    padding: 8px;
    font-size: 26px;
    color: #3e0219;
    font-family: 'Insaniburger';
    letter-spacing: 3px;
    text-align: center;
    margin: 0 auto;
    margin-top: 16px;
    font-family: 'Bunny';
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Bounce Animation for buttons */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
.start-menu-btn:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(227, 119, 219, 0.7); 
}
.start-menu-btn:active {
    transform: translateY(2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
}

/* Leaderboard Container */
.container-groups[data-group="leaderboard"] {
    text-align: center;
    padding: 25px;
    background-color: rgba(255, 249, 175, 0.8); 
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin: 30px;
    max-width: 600px;
    margin: 0 auto;
    animation: fadeIn 1.5s ease-out;
}

/* Leaderboard Title */
.container-groups[data-group="leaderboard"] h2 {
    font-size: 3em;
    color: #ff91a4; 
    font-family: 'Comic Sans MS', cursive, sans-serif;
    text-shadow: 2px 2px 8px rgba(255, 105, 180, 0.5);
    margin-bottom: 15px;
}

/* Leaderboard List */
.leaderboard-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

/* Individual Leaderboard Items */
.leaderboard-list li {
    font-size: 1.2em;
    padding: 8px;
    background-color: #fffbf2;
    margin: 15px 0;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7a4c75;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideIn 0.6s ease-out;
}

/* Hover Effect for Leaderboard Items */
.leaderboard-list li:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); 
}

/* Score Badge Styling */
.player-score {
    font-size: 1.4em;
    background-color: #ff91a4; 
    color: white;
    border-radius: 50px;
    padding: 8px 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    transition: background-color 0.3s ease;
}

/* Leaderboard Rank */
.leaderboard-list li::before {
    /* content: "⭐";  */
    margin-right: 12px;
    font-size: 1.8em;
    color: #ff91a4; 
}

.leaderboard-list li:nth-child(odd) {
    background-color: #ffe6f7; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .container-groups[data-group="leaderboard"] {
        padding: 15px;
    }

    .container-groups[data-group="leaderboard"] h2 {
        font-size: 2.2em;
    }

    .leaderboard-list li {
        font-size: 1.4em;
    }

    .player-score {
        font-size: 1.2em;
    }
}
body {
    background: rgb(255,249,175);
    background: -moz-radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
    background: -webkit-radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
    background: radial-gradient(circle, rgba(255,249,175,1) 23%, rgba(251,158,255,1) 54%, rgba(244,143,255,1) 91%);
}

.music-button {
    padding: 15px 30px;
    font-size: 1.5em;
    background-color:#ffe6f7;
    border: none;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.music-button:hover {
    background-color: #ff91a4;
}

.music-button:focus {
    outline: none;
}
.container-groups[data-group="save"] .info label {
    display: block;
    font-size: 42px;
    font-weight: bold;
    color: #ff6399;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Bunny';
}

.container-groups[data-group="save"] .info .points {
    width: 80%;
    margin: 0 auto;
    padding: 15px;
    font-size: 28px;
    color: gold;
    font-family: 'Insaniburger';
    letter-spacing: 1px;
    outline: none;
    transition: all 0.3s ease-in-out;
    display: block;
    text-align: center;
}
.container-groups[data-group="save"] .info .points::before {
    content: ">  ";
    color: #fff;
    pointer-events: none;
}
.container-groups[data-group="save"] .info .points::after {
    content: "  <";
    color: #fff;
    pointer-events: none;
}

.container-groups[data-group="save"] .info input[type="text"] {
    width: 75%;
    margin: 0 auto;
    padding: 15px;
    font-size: 28px;
    border-radius: 20px;
    border: 2px solid #ff91a4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    color: #000;
    font-family: 'Insaniburger';
    letter-spacing: 1px;
    outline: none;
    transition: all 0.3s ease-in-out;
    display: block;
    text-align: center;
}

.container-groups[data-group="save"] .info input[type="text"]:focus {
    border-color: #ff6399;
    box-shadow: 0 6px 12px rgba(255, 99, 153, 0.4);
}

/* Style for "Submit Score" button */
.container-groups[data-group="save"] .button-container .save-screen-btn {
    /* display: block;
    margin: 20px auto;
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #ff91a4;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease; */

    border-radius: 16px;
    width: 75%;
    padding: 8px;
    margin-top: 16px;
    font-size: 28px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #3e0219;
    border-style: solid;
    background-color: #f975c0;
    color: gold;
    font-family: 'Insaniburger';
    letter-spacing: 3px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

@media (max-width: 375px) {
    .container-groups[data-group="save"] .button-container .save-screen-btn {
        font-size: 22px;
    }
}

.container-groups[data-group="save"] .button-container .save-screen-btn:hover {
    background-color: #ff6399;
    box-shadow: 0 6px 12px rgba(255, 99, 153, 0.4);
    transform: scale(1.05);
}

.container-groups[data-group="save"] .button-container .save-screen-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.container-groups[data-group="save"] {
    position: relative;
    padding: 30px;
    background-color: #ffebf0;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin: 8px;
    text-align: center;
}
.container-groups[data-group="save"]::before,
.container-groups[data-group="save"]::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #ffcb47;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.container-groups[data-group="save"]::before {
    top: -20px;
    left: -20px;
}
.container-groups[data-group="save"]::after {
    top: -20px;
    right: -20px;
}
.container-groups[data-group="game"] .info {
    position: absolute;
    left: 7px;
    top: 7px;
    border-radius: 16px;
    padding: 8px;
    font-family: 'Bunny';
    font-size: 28px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #3e0219;
    border-style: solid;
    background-color: #f9f3d7;
    text-align: center;
    width: 305px;

    /* position: absolute;
    left: 70px;
    top: 1px;
    background-color: #f9f3d7;
    border: 2px solid #e0c97c;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    width: 200px;
    margin: 10px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  }

@media (max-width: 375px) {
    .container-groups[data-group="game"] .info {
        width: 250px;
    }
}

.container-groups[data-group="game"] .info .points {
    color: gold; /* Color for points */
}
  .container-groups[data-group="game"] .info .points::before {
    content: ">  ";
    margin-right: 4px;
    color: #fff;
    pointer-events: none;
}
.container-groups[data-group="game"] .info .points::after {
    content: "  <";
    margin-left: 4px;
    color: #fff;
    pointer-events: none;
}
.container-groups[data-group="game"] .info .bees {
    /* color: #ffd700; */ /* Color for bees */
}
.how_to_play-btn {
    background-color: #f9f3d7;
    border: 2px solid #e0c97c;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.how_to_play-btn:hover {
    background-color: #e0c97c;
    color: #fff;
}
.icon {
    width: 35px; /* Adjust width */
    height: 35px; /* Adjust height */
    vertical-align: middle; /* Align with text */
}
.button-icon {
    width: 20px;
    height: 20px;
    margin-right: 1px; /* Space between the icon and text */
}

.text-outlined {
    text-shadow: #3e0219 4px 0px 0px, #3e0219 3.87565px 0.989616px 0px, #3e0219 3.51033px 1.9177px 0px, #3e0219 2.92676px 2.72656px 0px, #3e0219 2.16121px 3.36588px 0px, #3e0219 1.26129px 3.79594px 0px, #3e0219 0.282949px 3.98998px 0px, #3e0219 -0.712984px 3.93594px 0px, #3e0219 -1.66459px 3.63719px 0px, #3e0219 -2.51269px 3.11229px 0px, #3e0219 -3.20457px 2.39389px 0px, #3e0219 -3.69721px 1.52664px 0px, #3e0219 -3.95997px 0.56448px 0px, #3e0219 -3.97652px -0.432781px 0px, #3e0219 -3.74583px -1.40313px 0px, #3e0219 -3.28224px -2.28625px 0px, #3e0219 -2.61457px -3.02721px 0px, #3e0219 -1.78435px -3.57996px 0px, #3e0219 -0.843183px -3.91012px 0px, #3e0219 0.150409px -3.99717px 0px, #3e0219 1.13465px -3.8357px 0px, #3e0219 2.04834px -3.43574px 0px, #3e0219 2.83468px -2.82216px 0px, #3e0219 3.44477px -2.03312px 0px, #3e0219 3.84068px -1.11766px 0px, #3e0219 3.9978px -0.132717px 0px;
}

.bee {
    content: "";
    position: absolute;
    top: 92%;
    left: -150px;
    width: 128px;
    height: 128px;
    background: url('../images/candy03.png');
    background-size: contain;
    animation: beeMove 11s infinite ease-in-out;
    pointer-events: none;
}

@keyframes beeMove {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    10% {
        transform: translateY(-10px) translateX(10vw) rotate(5deg);
    }
    20% {
        transform: translateY(15px) translateX(20vw) rotate(-5deg);
    }
    30% {
        transform: translateY(-20px) translateX(30vw) rotate(5deg);
    }
    40% {
        transform: translateY(10px) translateX(60vw) rotate(0deg);
    }
    50% {
        transform: translateY(-33px) translateX(50vw) rotate(-3deg);
    }
    60% {
        transform: translateY(10px) translateX(60vw) rotate(5deg);
    }
    70% {
        transform: translateY(-20px) translateX(70vw) rotate(0deg);
    }
    80% {
        transform: translateY(10px) translateX(80vw) rotate(-5deg);
    }
    90% {
        transform: translateY(-5px) translateX(90vw) rotate(5deg);
    }
    100% {
        transform: translateY(0) translateX(200vw) rotate(0deg);
    }
}

@keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

* {
    margin: 0;
}

.hi_there {
    animation: hi_there 1s ease;
}

@keyframes hi_there {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
}

.bees-container {
    margin-top: 4px;
}

.bee-emoji-container {
    position: absolute;
    top: -24px;
    left: 242px;
    transform: rotate(9deg);
    z-index: 999;
    pointer-events: none;
}

@media (max-width: 375px) {
    .bee-emoji-container {
        left: 200px;
    }
}

.leaderboard-return-btn {
    border-radius: 16px;
    padding: 2px;
    font-size: 32px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #3e0219;
    border-style: solid;
    background-color: #f975c0;
    color: gold;
    font-family: 'Insaniburger';
    letter-spacing: 3px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.multi-button-container button, .multi-button-container a {
    display: inline-block;
    border-radius: 16px;
    width: clamp(200px, 275px, 375px);
    padding: 4px;
    margin-top: 12px;
    font-size: 32px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #3e0219;
    border-style: solid;
    background-color: #f975c0;
    color: gold;
    font-family: 'Insaniburger';
    letter-spacing: 3px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}