@font-face {
    font-family: 'ClickHerFont';
    src: url('../../assets/fonts/amorlate.regular.ttf');
}
* {
    box-sizing: border-box;

}

.clickher {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: ClickHerFont, sans-serif;
    justify-content: space-between
}

.CH_background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
/*     will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    isolation: isolate;  */
}

.CH_background2 {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
/*     will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    isolation: isolate; */
}

.CH_topcont {
    width: var(--relative-width);
    max-width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    z-index: 3;
    pointer-events: none;
}
.CH_timercont {
    width: 25%;
    height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}
.CH_timer {
    width: 181px;
    height: 94px;
    color: white;
    font-weight: bold;
    position: relative;
    bottom: 5px;
    margin-left: 40px;
    z-index: 4;
}
.CH_timer img {
    width: 300px;
    height: 300px;
}
.CH_leavecont {
    width: 320px;
    height: 105px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.CH_leave {
    width: 100px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 10px;
    z-index: 4;
    pointer-events: all;
}
.CH_leave img {
    width: 70px;
    height: 70px;
    filter: brightness(0) saturate(100%) invert(73%) sepia(96%) saturate(2664%) hue-rotate(140deg) brightness(105%) contrast(101%);
}
.speedrun-mode .CH_leave img {
    filter: brightness(0) saturate(100%) invert(91%) sepia(82%) saturate(1145%) hue-rotate(350deg) brightness(107%) contrast(89%); 
}

.CH_scalecont {
    width: 50%;
    display: flex;
    justify-content: center;
}

.CH_scale {
    width: 600px;
    height: 35px;
    background-color: white;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 40px;
    border-radius: 18px;
    border: 6px solid black;
    display: flex;
    flex-direction: row;
}

.CH_scalesegment1, .CH_scalesegment2, .CH_scalesegment3, .CH_scalesegment4 {
    width: 25%;
    height: 100%;
}
.CH_scalesegment1 {
    background-color: #3357FF; /* Example color */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 4px solid black;
}
.CH_scalesegment2 {
    background-color: #3357FF; /* Example color */
    border-right: 4px solid black;
}
.CH_scalesegment3 {
    background-color: #3357FF; /* Example color */
    border-right: 4px solid black;
}
.CH_scalesegment4 {
    background-color: #3357FF; /* Example color */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.CH_currentsegment {
    background-color: #52f363; /* Example color for current segment */
}

.CH_hitspot {
    width: 5px;
    height: 100%;
    background-color: #ff7abc; /* Example color for hit spot */
    position: absolute;
    left : 80%;
}

.CH_indicator {
    width: 20px;
    height: 60px;
    border: 2;
    background: linear-gradient(135deg, #ffffff, #ffffff);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    position: absolute;
    left: 50px;
    transition: left 0.1s ease-out; /* Smoother, faster transition */
    transform: translateX(-50%);
    z-index: 10;
}

.diamond-container {
    position: absolute;
    transform: translateX(-50%);
    transition: left 0.2s ease-out;
    z-index: 5;
}

.diamond-container.gravity-active {
    transition: none; /* Remove transition during gravity */
}

/* Add smooth visual feedback transitions */
.diamond-container.in-range {
    filter: hue-rotate(120deg) brightness(1.2);
    transition: filter 0.15s ease-out, left 0.2s ease-out;
}

.diamond-container.out-of-range {
    filter: hue-rotate(0deg) brightness(1.2) drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
    transition: filter 0.15s ease-out, left 0.2s ease-out;
}

.CH_statscont {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.CH_stats {
    width: 350px;
    height: 450px;
    z-index: 3;
}

.CH_levelcont {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.CH_level {
    width: 100%;
    height: 50px;
    position: relative;
    font-size: 43px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.CH_progresscont {
    width: 100%;
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.CH_pointcont {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.CH_point {
    width: 100px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    color: white;
    
}


.CH_progressbar {
    width: 120px;
    height: 250px;
    background-color: transparent;
    border-bottom: 8px solid var(--bn-color);
    border-top: 8px solid var(--bn-color);
    border-left: 8px solid var(--bn-color);
    border-right: 8px solid var(--bn-color);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.CH_progressbarFill {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height 0.3s ease; /* Smooth transition for height changes */
    z-index: 0;
}

.CH_starscont {
    width: 150px;
    right: 150px;
    height: 250px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
}

/* Position stars relative to the progress bar */
.CH_goldstar {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 100px;
    left: 97px;
    /* Gold star at top (100% of progress bar) */
    top: 0%;
    transform: translateY(-50%);
}

.CH_silverstar {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 100px;
    /* Silver star will be positioned dynamically */
    transform: translateY(-50%);
}

.CH_bronzestar {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 100px;
    /* Bronze star will be positioned dynamically */
    transform: translateY(-50%);
}

.CH_goldstar img,
.CH_silverstar img,
.CH_bronzestar img {
    width: 50px;
    height: 50px;
    position: relative;

}

.CH_goldstar img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(94%) saturate(464%) hue-rotate(354deg) brightness(93%) contrast(102%) drop-shadow(2px 0px 0px black)
    drop-shadow(-2px 0px 0px black)
    drop-shadow(0px 2px 0px black)
    drop-shadow(0px -2px 0px black);
    
}

.CH_silverstar img {
    filter: brightness(0) saturate(100%) invert(90%) sepia(14%) saturate(17%) hue-rotate(326deg) brightness(87%) contrast(88%) drop-shadow(2px 0px 0px black)
    drop-shadow(-2px 0px 0px black)
    drop-shadow(0px 2px 0px black)
    drop-shadow(0px -2px 0px black);
}

.CH_bronzestar img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(66%) saturate(427%) hue-rotate(347deg) brightness(85%) contrast(87%) drop-shadow(2px 0px 0px black)
    drop-shadow(-2px 0px 0px black)
    drop-shadow(0px 2px 0px black)
    drop-shadow(0px -2px 0px black);
}

.silverstarmark {
    width: 40px;
    height: 0px;
    border: 4px solid var(--bn-color);
    border-radius: 10px;
    position: absolute;
    left: 40%;
    width: 50%;
    height: 2px;
    background-color: silver;
    z-index: 10;
}

.bronzestarmark {
    width: 40px;
    height: 0px;
    border: 4px solid var(--bn-color);
    border-radius: 10px;
    position: absolute;
    left: 40%;
    width: 50%;
    height: 2px;
    background-color: #CD7F32;
    z-index: 10;
}


/* bottomcont Stylesheet */


.CH_bottomcont {
    width: var(--relative-width);
    max-width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 4;
    pointer-events: none;
}
.CH_posecont {
    width: 35%;
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    z-index: 4;
    height: 67%;
    margin-top: 92px;
    align-items: flex-end;
    pointer-events: none;
}
.CH_buypackcont {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.CH_buypack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-right: 55px;
    transition: transform 0.5s ease-in-out;
    z-index: 4;
    pointer-events: all;
}
.pack-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    margin-bottom: 15px;
    z-index: 4;
}

.pack-cost-box {
    margin-top: 12px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    min-width: 45px;
    z-index: 1000;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.bronze-pack {
    border-color: #CD7F32;
    color: #ffffff;
}

.silver-pack {
    border-color: #C0C0C0;
    color: #ffffff;
}

.gold-pack {
    border-color: #FFD700;
    color: #ffffff;
}

.cost-value {
    font-family: inherit;
}

.CH_buypack:nth-child() :hover {
    filter: drop-shadow(3px 8px 27px rgb(255, 0, 0));
}

.CH_buypackImg1, .CH_buypackImg2, .CH_buypackImg3 {
    height: 175px;
    z-index: 1001;
    transition: transform 0.5s ease-in-out;
    border-radius: 6px;
    border: 6px solid white
}
.CH_buypackImg1box, .CH_buypackImg2box, .CH_buypackImg3box {
    height: 175px;
    z-index: 1001;
}

.CH_buypackImg1box.locked,
.CH_buypackImg2box.locked,
.CH_buypackImg3box.locked {
    filter: grayscale(100%) brightness(0.5);
    pointer-events: none;
    opacity: 0.6;
}

.pack-cost-box.locked {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.6;
}


.CH_buypackImg1box:hover {
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 40px rgb(205, 127, 50), 0 0 100px rgb(205, 127, 50), 0 0 120px rgb(205, 127, 50);
}

.CH_buypackImg2box:hover {
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 40px silver, 0 0 100px silver, 0 0 120px silver;
}

.CH_buypackImg3box:hover {
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 40px #EFBF04, 0 0 100px #EFBF04, 0 0 120px #EFBF04;
}

.CH_poseselectedcont {
    width: 200px;
    height: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    bottom: 20px;
    position: relative;
    pointer-events: all;
}

.CH_posearrow {
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
}

.CH_posearrow::before {
    content: '';
    width: 30px;
    height: 30px;
    border-right: 8px solid var(--bn-color);
    border-top: 8px solid var(--bn-color);
    transform: rotate(45deg);
    background: transparent;
}
.CH_poseslist {
    height: 100%;
    display: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 10px;
    position: relative;
    left: -7px;
    opacity: 0;
    transition: opacity 0.1s ease;
    pointer-events: all;
}

.CH_poseslist.show {
    display: flex;
    opacity: 1;
}

.CH_poses2, .CH_poses3, .CH_poses4, .CH_poses5 {
    width: 100px;
    height: 100px;
    border-radius: 25px;
    border: 8px solid ;
    border-color: var(--bn-color);
    position: absolute;
    bottom: 30px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    left: -130px;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

/* Open animation - faster delays */
.CH_poses2.animate {
    left: 0px;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.02s; /* Reduced from 0.03s */
}

.CH_poses3.animate {
    left: 125px;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.04s; /* Reduced from 0.06s */
}

.CH_poses4.animate {
    left: 249px;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.06s; /* Reduced from 0.09s */
}

.CH_poses5.animate {
    left: 373px;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.08s; /* Reduced from 0.12s */
}

/* Reverse/Close animation - faster delays */
.CH_poses2.reverse {
    left: -130px;
    opacity: 0;
    transform: scale(0.8);
    transition-delay: 0.06s; /* Reduced from 0.09s */
}

.CH_poses3.reverse {
    left: -130px;
    opacity: 0;
    transform: scale(0.8);
    transition-delay: 0.04s; /* Reduced from 0.06s */
}

.CH_poses4.reverse {
    left: -130px;
    opacity: 0;
    transform: scale(0.8);
    transition-delay: 0.02s; /* Reduced from 0.03s */
}

.CH_poses5.reverse {
    left: -130px;
    opacity: 0;
    transform: scale(0.8);
    transition-delay: 0s; /* Stays the same */
}

/* Hover effect for CH_poseselected */
.CH_poseselected {
    width: 120px;
    height: 120px;
    border-radius: 25px;
    border: 8px solid ;
    border-color: var(--bn-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.CH_poseselected:hover {
    transform: scale(1.1);
    border-color: var(--rp-color);
}

.CH_poseselected img {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.2s;
}

.CH_poseselected:hover img {
    transform: scale(1.05);
}

/* Individual pose hover effects */
.CH_poses2, .CH_poses3, .CH_poses4, .CH_poses5 {
    cursor: pointer;
}

.CH_poses2:hover, .CH_poses3:hover, .CH_poses4:hover, .CH_poses5:hover {
    transform: scale(1.15);
    border-color: var(--rp-color);
    z-index: 10;
}

.CH_poses2 img, .CH_poses3 img, .CH_poses4 img, .CH_poses5 img {
    width: 90%;
    height: 90%;
    transition: transform 0.2s ease;
}
.CH_poses2 img, .CH_poses3 img, .CH_poses4 img, .CH_poses5 img {
    width: 90%;
    height: 90%;
}

/* overlay cards  */


.card_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    z-index: 1000;
}
.cardsection {
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 36px;
    color: white;
    font-weight: bold;
}
.cardsection img {
    width: 425px;
    height: 520px;
    position: relative;
    bottom: 50px;
    bottom: 80px;
}

.buttonsection {
    width: 100%;
    height: 8%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 100;
    transition: opacity 0.5s ease-in-out;
}
.smashbutton {
    width: 250px;
    height: 80px;
    background-color: var(--pink-color);
    color: rgb(255, 255, 255);
    opacity: 0;
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease-out, all 0.5s ease-in-out, opacity 0.5s ease-in-out;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.smashbutton:hover {
    transform: scale(1.2);
}
.passbutton {
    width: 250px;
    height: 80px;
    background-color: var(--cyan-color);
    color: rgb(255, 255, 255);
    opacity: 0;
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease-out, all 0.5s ease-in-out, opacity 0.5s ease-in-out;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.passbutton:hover {
    transform: scale(1.2);
}
.timersection {
    width: 100%;
    height: 3%;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 72px;
    font-weight: bold;
}
.sorptimer {
    width: 100%;
    height: 40px;
    position: relative;
    bottom: 15px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin-top: 130px;
}
/* gameover  */

.game_over_text {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 72px;
    color: white;
    font-weight: bold;
}

.game_over_button2 {
    background-color: var(--rp-color);
    width: 300px;
    height: 100px;
    color: rgb(255, 255, 255);
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 35px;
}

.game_over_button2:hover {
    background-color: var(--bn-color);
}


/* levelcompleted  */
.completed_lvl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1501;
    font-size: 48px;
    color: rgb(255, 255, 255);
    font-weight: bold
}
.completed_lvl span {
    text-align: center;
}
.completed_lvl_button {
    width: 300px;
    height: 100px;
    background-color: var(--cyan-color);
    color: rgb(255, 255, 255);
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 143px;
}
.completed_lvl_button:hover {
    background-color: var(--pink-color); /* Slightly lighter cyan on hover */
}
.completed_lastlvl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1501;
    font-size: 48px;
    color: rgb(255, 255, 255);
    font-weight: bold
}
.completed_lastlvl_button {
    width: 300px;
    height: 100px;
    background-color: var(--pink-color);
    color: rgb(255, 255, 255);
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    top: 250px;
}
.completed_lastlvl_buttonspeedrun {
    width: 300px;
    height: 100px;
    background-color: var(--pink-color);
    color: rgb(255, 255, 255);
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    top: 100px;
}
.completed_lastlvl_buttonspeedrun:hover {
    background-color: var(--rp-color); /* Slightly lighter pink on hover */
}
.completed_lastlvl_button:hover {
    background-color: var(--bn-color); /* Slightly lighter pink on hover */
}
.completed_lastlvlspeedrun {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1501;
    font-size: 48px;
    color: rgb(255, 255, 255);
    font-weight: bold
}
  
/* .sorptimer {
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    /* border-radius: 10px; 
    overflow: hidden;
    position: relative;
    margin-top: 87px;
} */

.timer-fill {
    width: 100%;
    height: 100%;
    background: rgb(198, 1, 1);
    transition: width 1s linear;
  }

  @keyframes shrinkFromBothSides {
    from {
        width: 100%;
        left: 0;
    }
    to {
        width: 0%;
        left: 50%;
    }
}

.timer-fill-active {
    animation: shrinkFromBothSides 5s linear forwards;
}

  .CH_scale.bar-container {
    width: 75%;
    height: 40px;
    border: 5px solid rgb(255 255 255);
    position: relative;
    background: white;
    overflow: hidden;
    z-index: 3;
}

.CH_scale .progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #00ff00, #0000ff);
    z-index: 0;
    transition: width 0.1s ease;
}

.CH_scale .quad-line {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background: black;
    z-index: 1;
}

.CH_scale .label {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
    color: black;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.CH_scale .desired-indicator {
    position: absolute;
    top: -5px;
    width: 0;
    height: 0;
    z-index: 2;
    transform: translateX(-50%);
}
/* Remove ALL hover styles for locked poses */
.CH_poses2.locked, .CH_poses3.locked, .CH_poses4.locked, .CH_poses5.locked {
    border-color: #666666 !important;
}

/* Disable hover transformations completely */
.CH_poses2.locked:hover, .CH_poses3.locked:hover, 
.CH_poses4.locked:hover, .CH_poses5.locked:hover {
    transform: scale(1); /* Keep original animation scale */
    border-color: #666666; /* Keep gray border */
}

/* Lock icon */
.CH_poses2.locked::after, .CH_poses3.locked::after, 
.CH_poses4.locked::after, .CH_poses5.locked::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 10;
}

/* game_finished */

.game_finished {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1501;
    font-size: 48px;
    color: rgb(0, 0, 0);
    font-weight: bold;
}

.game_finished_button {
    width: 300px;
    height: 100px;
    background-color: #00E5FF;
    color: rgb(255, 255, 255);
    font-size: 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 143px;
}
.game_finished_button:hover {
    background-color: var(--pink-color);
}

.levelcompletedtext {
    font-size: 72px;
    color: var(--rp-color);
    font-weight: bold;
    position: relative;
}

.bonusselected {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 154px;
}

.bonus_text {
    position: relative;
    top: 100px;
    font-size: 65px;
    color: var(--cyan-color);
}
.bonusselected img {
    width: 300px;
    height: 300px;
}
.bonuslvls {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    top: 184px;
}

.bonus_lvl1, .bonus_lvl2 , .bonus_lvl3, .bonus_lvl4, .bonus_lvl5 {
    width: 150px;
    height: 150px;
    color: rgb(255, 255, 255);
    font-size: 30px;
    border-radius: 30px;
    transition: transform 0.3s ease-out;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 20px;
    margin: 20px;
}
.bonus_lvl1box, .bonus_lvl2box, .bonus_lvl3box, .bonus_lvl4box, .bonus_lvl5box {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    overflow: hidden;
    transition: transform 0.3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}
.bonus_lvl1 img, .bonus_lvl2 img, .bonus_lvl3 img, .bonus_lvl4 img, .bonus_lvl5 img {
    height: 100%;
}
.bonus_lvl1box:hover, .bonus_lvl2box:hover, .bonus_lvl3box:hover, .bonus_lvl4box:hover, .bonus_lvl5box:hover {
    transform: scale(1.5);
    transition: transform 0.3s;
    border: 4px solid var(--bn-color);
}

.bonuslvlfinish {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1501;
    font-size: 72px;
    color: var(--pink-color);
    font-weight: bold;
    margin-bottom: 28px;
}

.leavechecker {
    width: 300px;
    height: 213px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    display: none;
    flex-direction: column;
    justify-content: space-around;
    z-index: 15;
    font-size: 48px;
    color:  white;
    font-weight: bold;
    top: 100px;
    left: 20px;
    align-items: center;
    border-radius: 18px;
    border: 2px solid var(--bn-color);
}
.leavecheckerbuttoncont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    pointer-events: all;
 }
.leavecheckertext {
    font-size: 26px;
    text-align: center;
    color: white;
}
.leavecheckertextbuttoncont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.leavecheckerleave {
    width: 120px;
    height: 60px;
    background-color: var(--bn-color);
    color: rgb(255, 255, 255);
    font-size: 24px;
    border-radius: 30px;
    transition: transform 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
}
.leavecheckerleave:hover {
    transform: scale(1.2);
}
.leavecheckerno {
    width: 120px;
    height: 60px;
    background-color: var(--rp-color);
    color: rgb(255, 255, 255);
    font-size: 24px;
    border-radius: 30px;
    transition: transform 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
}
.leavecheckerno:hover {
    transform: scale(1.2);
}
.buildup-vfx {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
    transform: translateZ(1px); /* Separate GPU layer */
    pointer-events: none; /* Prevent interaction interference */
    contain: layout style paint; /* Limit repaints to this element */
}

.info_Guide_button {
    height: 60px;
    width: 60px;
    position: absolute;
    top: 275px;
    left: 18px;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: all;
}

.info_Guide_button img {
    width: 100%;
    cursor: pointer;
    pointer-events: all;
}

.info_guide_Overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: none;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.info_guideTxt {
    font-family: 'default';
    font-size: calc(1rem + 0.4vw);
    color: white;
    margin: 20px;
    text-align: center;
    max-width: 1400px;
    max-height: 1920px;
}

.info_guideTxt h2 {
    font-size: 35px;
    margin: 0;
    padding: 0;
    font-family: 'ClickHerFont';
    color: var(--cyan-color);
}

.info_guideExit {
    font-family: 'ClickHerFont';
    font-size: 50px;
    position: absolute;
    color: var(--cyan-color);
    top: 20px;
    right: 20px;
    cursor: pointer;
}