body {
    font-family: monospace;
    margin: 0;
    padding: 0;
    background-color: #0a0a0a;
    color: #e6e6e6;
}

h1, h2 {
    text-align: center;
}

h1 {
    font-family: 'Monoton';
    font-weight: normal;
    word-spacing: 6px;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.3rem;
}

.screen-title {
    padding: 10px;
    margin: 0;
}

.bold {
	font-weight: bold;
}

.gold {
	color: #ffd700;
}

.glow {
    box-shadow: 
    0 0 7px #fff, 
    0 0 11px #fff, 
    0 0 12px #ffd700, 
    0 0 22px #ffd700, 
    0 0 20px #ffd700, 
    0 0 32px #ffd700;
}

button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: black;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

button:disabled {
    /*background-color: #cccccc;*/
    cursor: not-allowed;
}

input {
    border-radius: 6px;
    outline: none;
}

.no-pad {
    padding: 0;
    margin: 0;
}

.svg-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.start-button-text {
    position: absolute;
    font-family: 'Monoton';
    font-size: 1.5rem;
    word-spacing: 6px;
    color: #e6e6e6;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #ffd700) drop-shadow(0 0 11px #ffd700);
}

.svg-icon {
    position: relative;
    z-index: 1;
}

/*NEON BUTTONS*/
.neon-btn-glow {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #ffd700) drop-shadow(0 0 3px #ffd700);
    transition: filter 0.1s ease-in-out;
}

.neon-btn-glow:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #ffd700) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 25px #ffd700);
}

.neon-btn-glow.green {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #4CAF50) drop-shadow(0 0 3px #4CAF50);
    transition: filter 0.1s ease-in-out;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.neon-btn-glow.green:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #4CAF50) drop-shadow(0 0 5px #4CAF50);
}

.neon-btn-glow.atk {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #B8CAD4) drop-shadow(0 0 3px #B8CAD4);
    transition: filter 0.1s ease-in-out;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.neon-btn-glow.atk:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #B8CAD4) drop-shadow(0 0 5px #B8CAD4) drop-shadow(0 0 15px #B8CAD4);
}

.neon-btn-glow.atk:disabled, .neon-btn-glow.spatk:disabled, .neon-btn-glow.green:disabled, .neon-btn-glow.atk:disabled:hover, .neon-btn-glow.spatk:disabled:hover, .neon-btn-glow.green:disabled:hover {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff);
}

.neon-btn-glow.spatk {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #3f9ed0) drop-shadow(0 0 3px #3f9ed0);
    transition: filter 0.1s ease-in-out;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.neon-btn-glow.spatk:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #3f9ed0) drop-shadow(0 0 5px #3f9ed0) drop-shadow(0 0 15px #3f9ed0);
}

.neon-btn-glow.warning {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #F54437) drop-shadow(0 0 3px #F54437);
    transition: filter 0.1s ease-in-out;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.neon-btn-glow.warning:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #F54437) drop-shadow(0 0 5px #F54437) drop-shadow(0 0 15px #F54437);
}

.neon-btn-glow.white {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff);
    transition: filter 0.1s ease-in-out;
}

.neon-btn-glow.white:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
}

.neon-btn-glow.purple {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #B32AF3) drop-shadow(0 0 3px #B32AF3);
    transition: filter 0.1s ease-in-out;
}

.neon-btn-glow.purple:hover {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #B32AF3) drop-shadow(0 0 5px #B32AF3) drop-shadow(0 0 15px #B32AF3);
}

/*NEON BUTTON TEXT*/
.neon-button-text {
    position: absolute;
    font-family: 'Monoton';
    word-spacing: 6px;
    font-size: 1.2rem;
    color: #e6e6e6;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #ffd700) drop-shadow(0 0 11px #ffd700);
}

.neon-button-text.green {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #4CAF50) drop-shadow(0 0 11px #4CAF50);
}

.neon-button-text.warning {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #F54437) drop-shadow(0 0 11px #F54437);
}

.neon-button-text.white {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #fff) drop-shadow(0 0 11px #fff);
}

.neon-button-text.spatk {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #3f9ed0) drop-shadow(0 0 11px #3f9ed0);
}

.neon-button-text.back {
    font-size: 1rem;
}

.back-btn {
    font-size: 1rem;
    margin-top: 10px;
    position: absolute;
    top: 60px;
    left: 20px;
}

#store-screen, #settings-screen, #achievements-screen, #stats-screen {
    padding: 70px 20px 20px 20px;
    background-color: #0a0a0a;
    overflow-x: hidden;
}

#entrance-screen, #battle-screen {
    padding: 20px;
}

h2.round-number {
    margin: 0;
}

.version-no {
    color: #333;
}


/*/////////////////////////////////////////////////////////*/
/*////////////////////// STATUS BAR //////////////////////*/
/*///////////////////////////////////////////////////////*/

#toolbar {
    position: sticky;
    top: 0;
    background-color: #2b2b2b;
    display: flex;
    justify-content: space-around; /* This will space items equally */
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #FFD700;
    z-index: 999;
    box-sizing: border-box;
    width: 100%;
}

.toolbar-items {
	display: flex;
    justify-content: space-around;
    max-width: 40rem;
    width: 100%;
}

.status-item {
    display: flex;
    align-items: center; /* To vertically align the icon and the text in the middle */
    font-family: 'Monoton';
    word-spacing: 6px;
}

#toolbar-gold {
    color: #FFD700;
}

.status-icon {
    height: 1.6rem;
    margin-right: 8px;
}

.status-item.stat-hp svg {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #FF4400) drop-shadow(0 0 8px #FF4400);
}

.status-item.stat-atk svg {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #B8CAD4) drop-shadow(0 0 8px #B8CAD4);
}

.status-item.stat-spatk svg {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #3f9ed0) drop-shadow(0 0 8px #3f9ed0);
}

.status-item.stat-heal svg {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #4CAF50) drop-shadow(0 0 8px #4CAF50);
}

.status-item.stat-gold svg {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 8px #ffd700);
}

.status-item.stat-hp {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #FF4400, 0 0 21px #FF4400;
}
.status-item.stat-atk {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #B8CAD4, 0 0 21px #B8CAD4;
}
.status-item.stat-spatk {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #3f9ed0, 0 0 21px #3f9ed0;
}
.status-item.stat-heal {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #4CAF50, 0 0 21px #4CAF50;
}
.status-item.stat-gold {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #ffd700, 0 0 21px #ffd700;
}

.status-value {
    font-size: 1.3rem;
}

/*//////////////////////////////////////////////////////////*/
/*///////////////////// LOADING SCREEN ////////////////////*/
/*////////////////////////////////////////////////////////*/

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#startGameButton {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#loadingIcon {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loading-bar {
    width: 100%;
    max-width: 20rem; /* or any desired width */
    height: 3px;
    background-color: #222; /* dark background color */
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.loading-filler {
    height: 100%;
    width: 0; /* initial width is 0 */
    background-color: #0f0; /* neon green color */
    /*box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0; /* neon glow effect */
}





/*//////////////////////////////////////////////////////////*/
/*//////////////////// ENTRANCE SCREEN ////////////////////*/
/*////////////////////////////////////////////////////////*/


/* Main entrance screen */
#entrance-screen {
    text-align: center; /* Ensure everything within the entrance screen is centered */
    display: flex;
    flex-direction: column;
}

/*BG IMG*/
#entrance-screen:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 130%;
    opacity: 0.6;
    background-image: url(./img/bg/ebg.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    z-index: -10;
    overflow: hidden;
}

#entrance-player-container {
    display: inline-block;
    margin-bottom: 20px; /* Spacing between the character and the buttons */
}


#entrance-player-char {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: block; /* To center the SVG using margin auto */
}

#entrance-player-char-shadow {
    width: 110px; /* Slightly wider than the character */
    height: 20px; /* Making the shadow flat */
    background-color: rgba(0,0,0,0.3); /* Semi-transparent black for the shadow */
    border-radius: 50%;
    margin: 10px auto 0; /* Push it slightly down below the character */
    z-index: 1; /* Place it below the character */
    position: relative; /* Required to move it up and down with translateY */
    animation: shadowBob 1200ms infinite; /* Shadow's own bobbing animation */
}

.character-glow {
	filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 7px #ffd700);
}

.enemy-glow {
	filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #F54437) drop-shadow(0 0 7px #F54437) drop-shadow(0 0 12px #F54437);
}


@keyframes bob {
    0%, 100% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(4px);
    }
}
.bob {
    animation: bob 1200ms infinite; /* 400ms for full wobble effect */
}

@keyframes shadowBob {
    0%, 100% {
        transform: translateY(-3px); /* Less movement than the character */
        filter: blur(5px); /* More blur when the character is farthest */
        opacity: 0.7; /* Less opaque when the character is up */
    }
    50% {
        transform: translateY(3px);
        filter: blur(2px); /* Less blur when the character is nearest */
        opacity: 1; /* More opaque when the character is down */
    }
}


#player-name-container {
	padding: 10px 0;
    margin-bottom: 20px;
}

.intro-text {
	font-size: 1rem;
	margin: 20px 0 0 0;
}

#player-name {
	font-family: 'Monoton';
    word-spacing: 6px;
	text-transform: uppercase;
}

#game-title {
    font-size: 2rem;
    font-family: 'Monoton';
    word-spacing: 6px;
    text-transform: uppercase;
}

.neonText {
  color: #fff;
  text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #ffd700,
      0 0 82px #ffd700,
      0 0 92px #ffd700,
      0 0 102px #ffd700,
      0 0 151px #ffd700;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

.flicker {
	animation: flicker 8.5s infinite alternate;
}

#startRound {
    width: 100%;
    background-color: #222;
    border-radius: 5px;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 8px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 16px;
    max-width: 18rem;
    text-align: center;
    padding-right: 20px; /* Make space for the custom caret */
    background-image: url('./SVG/Icons/menu-down.svg');
    background-repeat: no-repeat;
    background-position: right center;
    font-family: monospace;
}

/* For the dropdown arrow in the select box */
#startRound::-ms-expand {
    display: none;
}

#startRound:focus {
    outline: none;
}

.start-round-label {
    width: 100%;
    display: block;
}

.edit-name {
	cursor: pointer;
    margin-left: 3px;
    height: 1rem;
    color: #f9f9f9;
}

/*#start-button {
    font-size: 1.4rem;
    background: linear-gradient(145deg, #FFD700 50%, #FBE25E 50%);
    background-size: 300% 100%; /* triple the width 
    background-position: 50% 0; /* Start in the middle 
    transition: background-position 0.5s ease-in-out; /* Smooth transition of the gradient 
	position: relative;  /* Makes sure the SVG rotates in relation to the button 
    overflow: hidden;     This ensures that any part of the SVG outside the button boundaries after rotation will be hidden 
    color: #222;
    max-width: 320px;
}

#start-button:hover {
    background-position: 0 0; /* Move to the left, making the darker color cover the button 
    color: white; 
    box-shadow: 
    	0 0 7px #fff, 
    	0 0 11px #fff, 
    	0 0 12px #ffd700, 
    	0 0 22px #ffd700, 
    	0 0 20px #ffd700, 
    	0 0 32px #ffd700;
}*/

.dungeon-icon {
    height: 4.5rem;
    margin-left: 3px;
    transition: transform 0.5s ease, fill 0.5s ease;  /* Add a transition for the transform and fill */
    transform-origin: center;  /* Set the origin of the transform to the center of the SVG */
    fill: #222;  /* Set initial fill color */
}

/*#start-button:hover .dungeon-icon {
    transform: rotateY(180deg);   Flip the SVG on hover 
    fill: white;  /* Change the fill color on hover 
}*/

.ent-btn {
	width: 15rem;
}

.green-btn {
	background: linear-gradient(145deg, #4CAF50 50%, #5CC160 50%);
    background-size: 300% 100%; /* triple the width */
    background-position: 50% 0; /* Start in the middle */
    transition: background-position 0.5s ease-in-out; /* Smooth transition of the gradient */
}

.green-btn:hover {
    background-position: 0 0; /* Move to the left, making the darker color cover the button */
    color: white; 
}

.green-btn:hover .ent-button-icon {
    fill: white;  /* Change the fill color on hover */
}

.ent-button-icon {
	height: 2.2rem;
	margin-left: 3px;
	fill: #222;
}

#highest-round {
    margin: 0px auto 20px auto;
    font-size: 1em;
    text-align: center;
    background: rgba(100,100,100,0.1);
    max-width: 18rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5rem;
    width: 100%;
    box-shadow: 0 8px 4px 0 rgba(0,0,0,0.1);
}

#highest-round p {
    margin: 0;
    font-weight: bold;
}

#max-round {
    color: #FFD700;
    font-size: 1.5rem;
    font-family: 'Monoton';
}


/*//////////////////////////////////////////////////////////*/
/*//////////////////// BATTLE SCREEN ////////////////////*/
/*////////////////////////////////////////////////////////*/

#battle-screen {
    background: #0a0a0a;
    color: #e0e0e0;
    position: relative;
    flex-direction: column;
    align-items: center;
}

#battle-screen:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 50%;
    width: 75%;
    height: 130%;
    opacity: 0.4;
    background-image: url(./img/bg/bbg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    overflow: hidden;
}

/* Player section */
#player-section {
    float: left;
    width: 50%;
    text-align: center;
    position: relative;
}

#player-container {
    position: relative;
    display: inline-block;
    margin: 38px 0;
}

/*#player-char {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 50%;
    margin: 0 auto;
}*/

#battle-ground {
    width: 100%;
    max-width: 40rem;
    z-index: 3;
}

#game-controls {
    padding: 10px;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    max-width: 40rem;
    z-index: 3;
}

#items-abilities {
    width: 100%;
    max-width: 40rem;
    z-index: 3;
}

#entrance-player-char {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: block; /* To center the SVG using margin auto */
}

#enemy-section {
    float: right;
    width: 50%;
    text-align: center;
    position: relative;
}

#enemy-container {
    position: relative;  /* This allows child elements to be positioned relative to this element */
    display: inline-block;  /* Make this the same width as the enemy character */
    margin: 38px 0;
}

#enemy-char {
/*    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #F44336;
    margin: 0 auto;*/

    height: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: block; /* To center the SVG using margin auto */
}

#battle-player-name {
    color: #FFD700;
}

#battle-enemy-name {
    color: #f44236;
}

.battle-name {
	font-family: 'Monoton';
    word-spacing: 6px;
	font-size: 1.4rem;
	margin: 8px 0;
	text-transform: uppercase;
}

#player-info, #enemy-info {
	padding: 0 8%;
}

.health-bar {
    height: 20px; /*or any other value you deem fit*/
    background-color: #f3f3f3; /*a light grey background so you can see the bar's container*/
    /*transform: skewX(-50deg);*/
    border-radius: 20px;
}

.hp-bar {
    background-color: #007bff; /*a blue color for the filled part*/
    height: 100%;
    border-radius: 20px;
}

#enemy-hp-bar {
	background-color: #F44336;
}


/* Stack elements vertically within each container */
.battle-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

.battle-btn-container#heal-battle-button-container {
    display: none;
}

.atk-text, .progress {
    margin: 10px 0;
}

/* limit the width of the progress bar to match the button width */
progress {
    width: 133px;
}

.cooldown-bar {
    background-color: #e6e6e6;
    height: 12px; 
    border-radius: 20px;
    overflow: hidden; 
    width: 100%;
}

.cd-bar {
    height: 100%;
    transition: width 0.3s ease-out;
}

.cd-bar.atk {
    background-color: #B8CAD4;
}

.cd-bar.spatk {
    background-color: #3f9ed0;
}

.cd-bar.heal {
    background-color: #4CAF50;
}

.battle-items-title {
    margin: 30px 0;
}

.battle-items-title h3 {
    color: #ffd700;
}


/*enemy damage text animation*/
@keyframes floatText {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes floatTextTop {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, calc(-100% - 80px)); 
    }
}

.damage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    font-family: 'Monoton';
    color: #F54437;
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #e6e6e6, 0 0 21px #e6e6e6;
    animation: floatText 1.5s forwards;
    background-color: transparent;
    z-index: 10;
}



/*.dodge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    animation: floatText 1s forwards;
    background-color: #3f9ed0;
    padding: 5px 10px;
    border-radius: 8px;
    clip-path: polygon(90% 10%, 80% 37%, 95% 50%, 82% 63%, 93% 90%, 75% 85%, 64% 98%, 48% 79%, 30% 96%, 25% 83%, 4% 85%, 20% 66%, 4% 55%, 22% 40%, 7% 19%, 38% 20%, 50% 6%, 67% 22%);
}*/

.dodge-text {
    color: #e6e6e6;
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #B8CAD4, 0 0 21px #B8CAD4;
}

.critical-text span {
    color: #000;
    font-size: 1rem;
}

.potion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-family: 'Monoton';
    color: #4CAF50;
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #e6e6e6, 0 0 21px #e6e6e6;
    animation: floatText 1s forwards;
    z-index: 10;
}

.grenade-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-family: 'Monoton';
    color: #F54437;
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 0px #e6e6e6, 0 0 21px #e6e6e6;
    animation: floatText 1s forwards;
    z-index: 10;
}

.grenade-text span, .splash-dmg {
    color: #000;
    font-size: 1rem;
}

.purchase-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-family: 'Monoton';
    word-spacing: 6px;
    color: #e6e6e6;
    animation: floatTextTop 1s forwards;
    /*background-color: #4CAF50;*/
    padding: 10px 6px;
    /*border-radius: 8px;*/
    /* Creating octagon shape */
    /*clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);*/
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #ffd700, 0 0 10px #ffd700, 0 0 10px #ffd700, 0 0 11px #ffd700;
    z-index: 10;
}

.defeated-text {
	position: absolute;
    top: 30%;
    left: 50%;
    width: 250px;
    text-align: center;
    margin-left: -135px;
    background: #4caf50;
    padding: 10px;
    box-shadow: 0px 5px 8px 1px rgba(0,0,0,0.3);
}

.defeated-text span {
	font-size: 1.4rem;
	font-weight: bold;
}

/*.status-condition {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 50px;
    text-align: center;
    margin-left: -25px;
}*/

.status-condition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-family: 'Monoton';
    color: #FFD700;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #e6e6e6, 0 0 11px #e6e6e6, 0 0 21px #e6e6e6;
    animation: fadeIn 0.5s ease-in-out;
    z-index: 9;
}

.status-condition.sleep {
    color: #DA468D;
}
.status-condition.rage {
    color: #F44336;
}

/*BATTLE ANIMATIONS*/

/* Enemy Fade Out Animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Enemy Slide In Animation */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.fade-out {
    animation: fadeOut 2s forwards; /* 'forwards' makes the end state of animation persist */
}

.fade-in {
    animation: fadeIn 2s forwards;
}

.slide-in {
    animation: slideInFromRight 200ms forwards;
}

/* Player jerk forward - attack */
@keyframes jerkForward {
    50% {
        transform: translateX(10px); /* Adjust the value based on how far you want the player to move */
    }
    100% {
        transform: translateX(0);
    }
}

/* Enemy jerk forward - attack */
@keyframes enemyjerkForward {
    50% {
        transform: translateX(-10px); /* Adjust the value based on how far you want the enemy to move */
    }
    100% {
        transform: translateX(0);
    }
}

/* Enemy wobble - attacked */
@keyframes wobble {
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Player jerk forward - special attack*/
@keyframes spAtk {
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(-15px);
    }
    85% {
    	transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

/*player attacks*/
.jerk {
    animation: jerkForward 150ms; /* 200ms for quick jerk forward and back */
}

/*take damage*/
.wobble {
    animation: wobble 300ms; /* 400ms for full wobble effect */
}

/*heavy attack*/
.spAtk {
    animation: spAtk 200ms; /* 400ms for full spAtk effect */
}

/*enemy attacks*/
.enemyjerkForward {
	animation: enemyjerkForward 150ms;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(1px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-1px, 1px) rotate(0deg); }
    70% { transform: translate(1px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}

/*death skull*/
.skull-hidden {
    opacity: 0;
}

.skull-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #F54437) drop-shadow(0 0 5px #F54437) drop-shadow(0 0 3px #F54437);
}

.death-skull {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 30%;
}


/*BACKGROUND SCROLLING ANIMATION */

#background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 300px;
    overflow: hidden;
}

.moving-background {
    background-image: url(./img/bg/cbg.webp);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(200%);
    animation: scrollBackground 8s linear infinite;
    opacity: 0.4;
    background-repeat: repeat;
    background-size: 100px 100px;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, #0a0a0a);
}

.round-number, #player-section, #enemy-section {
    z-index: 3;
}

@keyframes scrollBackground {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px); /* Assuming your image is 300px wide */
    }
}





/*//////////////////////////////////////////////////////////*/
/*//////////////////// STORE SCREEN ////////////////////*/
/*////////////////////////////////////////////////////////*/

#store {
    display: flex;
    justify-content: center;
}

#store-screen:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 50%;
    width: 75%;
    height: 130%;
    opacity: 0.4;
    background-image: url(./img/bg/ubg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    overflow: hidden;
}

#store-items-container {
	display: flex;
	flex-direction: column;
	align-items: center;
    max-width: 40rem;
    width: 100%;
    z-index: 10;
}

#store-gold {
	color: gold;
}

.store-gold-icon {
	height: 1rem;
}

.exit-button {
	background-color: #ccc;
    position: absolute;
    top: 40px;
    left: 30px;
}

.store-section {
    padding: 20px;
    max-width: 40rem;
    width: 100%;
}

.divider {
    height: 2px;
    background-color: #e6e6e6;
    margin: 10px 0;
}

.description {
    flex: 1; /* This ensures the description takes as much space as possible before the button */
    padding: 5px 10px;
    text-align: center;
}

.store-item {
    display: flex;           /* Enables flexbox for the button */
    align-items: center;     /* Vertically aligns the content */
    justify-content: center; /* Horizontally aligns the content (optional if you want centered content) */
    padding: 10px 20px;      /* Example padding, adjust as needed */
    border: none;            /* Remove default borders (optional, style as needed) */
    background-color: #4CAF50; /* Example background color, adjust as needed */
    color: #FFF;            /* Text color, adjust as needed */
    cursor: pointer;        /* Hand cursor on hover for better UX */
}

.store-item:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

.store-item-name {
    font-size: 1rem;
}


/*NEW STORE BUTTON STYLES*/

.store-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
    width: 100%;
}

.store-row-title {
    width: 100%;
    border-bottom: 1px solid #FFD700;
}

.store-row-title > h2 {
    text-align: left;
    padding: 1px;
    margin-top: 40px;
    margin-bottom: 0;
}

.store-column {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-evenly;
    flex: 1;
    text-align: center;
}

#heal-upgrade-container {
    display: none;
}

.store-consumable, .store-upgrade, .battle-consumable {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    height: 100%;
    padding: 0;
    margin-bottom: 10px;
}

/* SVG Square Outline Styling */
.store-button-outline {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#upgrade-inventory {
    background: none;
}

.upgrade {
    stroke: #e6e6e6;
    stroke-width: 2px;
    stroke-linejoin: round;
}

.upgrade.atk {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #B8CAD4) drop-shadow(0 0 8px #B8CAD4) drop-shadow(0 0 8px #B8CAD4);
    transition: filter 150ms;
}

.upgrade.spatk {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #3f9ed0) drop-shadow(0 0 8px #3f9ed0) drop-shadow(0 0 8px #3f9ed0);
    transition: filter 150ms;
}

.upgrade.hp {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #F44336) drop-shadow(0 0 8px #F44336) drop-shadow(0 0 8px #F44336);
    transition: filter 150ms;
}

.upgrade.potion {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #4CAF50) drop-shadow(0 0 8px #4CAF50) drop-shadow(0 0 8px #4CAF50);
    transition: filter 150ms;
}

.upgrade.darts {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #DA468D) drop-shadow(0 0 8px #DA468D) drop-shadow(0 0 8px #DA468D);
    transition: filter 150ms;
}

.upgrade.geode {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #B32AF3) drop-shadow(0 0 8px #B32AF3) drop-shadow(0 0 8px #B32AF3);
    transition: filter 150ms;
}

.upgrade.atk:hover{
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #B8CAD4) drop-shadow(0 0 8px #B8CAD4) drop-shadow(0 0 8px #B8CAD4) drop-shadow(0 0 18px #B8CAD4);
}

.upgrade.spatk:hover{
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #3f9ed0) drop-shadow(0 0 8px #3f9ed0) drop-shadow(0 0 8px #3f9ed0) drop-shadow(0 0 18px #3f9ed0);
}

.upgrade.hp:hover{
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #F44336) drop-shadow(0 0 8px #F44336) drop-shadow(0 0 8px #F44336) drop-shadow(0 0 18px #F44336);
}

.upgrade.potion:hover {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #4CAF50) drop-shadow(0 0 8px #4CAF50) drop-shadow(0 0 8px #4CAF50) drop-shadow(0 0 18px #4CAF50);
}

.upgrade.darts:hover {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #DA468D) drop-shadow(0 0 8px #DA468D) drop-shadow(0 0 8px #DA468D) drop-shadow(0 0 18px #DA468D);
}

.upgrade.geode:hover {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #B32AF3) drop-shadow(0 0 8px #B32AF3) drop-shadow(0 0 8px #B32AF3) drop-shadow(0 0 18px #B32AF3);
}

.store-consumable:disabled > .upgrade , .store-consumable:disabled > .upgrade:hover, .store-upgrade:disabled > .upgrade , .store-upgrade:disabled > .upgrade:hover,
.battle-consumable:disabled > .upgrade , .battle-consumable:disabled > .upgrade:hover , #upgrade-inventory:disabled > .upgrade , #upgrade-inventory:disabled > .upgrade:hover {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #e6e6e6);
}

.upgrade-cost {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.upgrade-name {
    text-align: center;
    width: 100%;
}

/* SVG Icon Styling */
.store-button-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle; 
    margin-right: 8px; 
}

/* +1 Text Styling */
.increment-text {
    font-size: 16px; 
    vertical-align: middle; 
    margin-right: 8px; 
}

/* Cost Text Styling */
.cost-text {
    font-size: 1.2rem;
    color: #ffd700;
}

.cost-text.geodes {
    color: #B32AF3;
    margin-left: 3px;
}

.cost-icon {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 8px #ffd700);
    margin-right: 3px;
}

.items-owned {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.1rem;
}

/*GEODES STORE*/

.geodes-store-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    align-items: center;
    width: 100%;
}

.geodes-display-section {
    display: flex;
    gap: 5px;
    align-items: center;
}

.store-row.geode-store-row {
    margin-bottom: 50px;
}

.geodes-icon {
    width: 35px;
}

.geode-glow {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #B32AF3) drop-shadow(0 0 3px #B32AF3);
    transition: filter 0.1s ease-in-out;
}

#game-over-geodes {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #B32AF3) drop-shadow(0 0 11px #B32AF3);
}

#player-geodes-store {
    font-family: 'Monoton';
    font-size: 2rem;
    color: #e6e6e6;
}

.geodes-count {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 3px #B32AF3, 0 0 11px #B32AF3, 0 0 21px #B32AF3;
}

.purple {
    color: #B32AF3;
}

.store-two-line {
    height: 35px;
    margin: 0 8px;
}

/*//////////////////////////////////////////////////////////*/
/*//////////////////// SETTINGS SCREEN ////////////////////*/
/*////////////////////////////////////////////////////////*/

#settings-screen label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

#settings-screen:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 50%;
    width: 75%;
    height: 130%;
    opacity: 0.4;
    background-image: url(./img/bg/sbg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    overflow: hidden;
}

#settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.settings-items-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


#player-name-input {
    font-family: 'Monoton';
    word-spacing: 6px;
}

/* Common styles for the SVG-input wrappers */
.svg-input-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    height: 5rem;
    margin: 18px 0;
}

.neon-input {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18rem;
    background: transparent;
    border: none;
    padding: 20px;
    text-align: center;
    font-size: 1.3rem;
    color: #e6e6e6;
    z-index: 1; /*above SVG*/
}

.input-svg-outline {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;  /* Below the input */
}

.svg-input-wrapper:focus-within .input-svg-outline, .svg-input-wrapper:hover .input-svg-outline {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #3f9ed0) drop-shadow(0 0 5px #3f9ed0) drop-shadow(0 0 15px #3f9ed0);
}

/* Separate styles for the color picker to handle the appearance */
#playerColorPicker {
    cursor: pointer;
    z-index: 1;
}

#playerColorPicker::-webkit-color-swatch {
    border-radius: 5px;
    border: none;
}

#playerColorPicker::-moz-color-swatch {
    border-radius: 5px;
    border: none;
}

.hidden-color-picker {
    height: 150px;
    width: 150px;
    opacity: 0;
    margin-top: 15px;
}

.clickable-char {
    cursor: pointer;
    margin-top: 30px;
}

.reset-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
    margin-top: 50px;
}

#reset-button {
    /*margin-top: 50px;*/
    max-width: 150px;
}

#reset-button span {
    font-size: 0.9rem;
}

.settings-item {
    margin: 20px 0;
    padding: 10px 0;
}

.music-toggle-button {
    display: flex;
}

.import-export-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
}


/*///////////////////////////////////////////////////////////*/
/*//////////////////// GAME OVER SCREEN ////////////////////*/
/*/////////////////////////////////////////////////////////*/

#game-over-screen {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s linear 1s, max-height 1s; 
    /* Delay visibility transition for fade-in but not for fade-out */
    max-height: 0;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    background: #0a0a0a;
    position: relative;
    height: 100%;
    z-index: 99;
}

#game-over-screen.visible {
    opacity: 1;
    visibility: visible;
    max-height: 100%; 
    transition: opacity 1s, visibility 0s 0s, max-height 1s 0s;
    /* Reset transition timings for fade-out so it's instant */
}



.game-over-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    max-width: 40rem;
    min-width: 20rem;
}

.game-over-info {
    text-align: center;
    padding: 20px 20px 100px 20px;
}

.game-over-info h1 {
    color: #F44336;
    font-size: 3rem;
    margin: 0 0 30px 0;
    font-weight: normal;
}

.death-text {
    margin: 20px 0;
}

.death-text p {
    font-size: 1.1rem;
    margin: 0;
}

/*#game-over-rounds, #game-over-gold {
	color: gold;
}*/

.stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertical alignment */
    width: 100%; /* you can set this to a fixed width if you want */
}

.stat-row p {
    font-size: 1rem;
    text-align: left;
}

.stat-row span {
    font-size: 1.2rem;
    font-family: 'Monoton';
    font-weight: normal;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #FFD700) drop-shadow(0 0 11px #FFD700);
}

/*Initially hide the items awarded*/
#potions-loot-row, #grenades-loot-row, #darts-loot-row, #rage-loot-row {
    display: none;
}

#no-loot-row {
    display: flex;
}

.loot-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 5px; /* Optional spacing between items */
}

.loot-item {
    margin-bottom: 5px; /* Add a little space after each item for better readability */
}

.stats-title {
    width: 75%;
    text-align: left;
    border-bottom: 1px solid #ffd700;
    font-size: 1.2rem;
    margin: 8px 0;
    font-family: 'Monoton';
    font-weight: normal;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #FFD700) drop-shadow(0 0 11px #FFD700);
    word-spacing: 6px;
}

@keyframes flicker-svg {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    filter: 
    drop-shadow(0 0 4px #fff) 
    drop-shadow(0 0 7px #fff) 
    drop-shadow(0 0 10px #F54437) 
    drop-shadow(0 0 7px #F54437) 
    drop-shadow(0 0 12px #F54437);
  }
  20%, 24%, 55% {       
    filter: none;
  }
}

.flicker-svg {
    animation: flicker-svg 6.5s infinite alternate;
}





/*BUTTON ANIMATIONS*/

/*.particleButton {
    z-index: 1;
}

.particles {
    z-index: -1;
    background: none !important;
    pointer-events: none;
    cursor: pointer;
    box-shadow: none;
    position: absolute;
}

.particles::after {
    position: absolute;
    content: "";
    left: -105px;
    top: -105px;
    min-width: 300px;
    min-height: 300px;
    pointer-events: none;
    transition: background-size ease-in-out 0.5s,
        background-position ease-in-out 0.5s;
    background-repeat: no-repeat;
    overflow: hidden;
}

.particleButton:active ~ .particles::after {
    animation: none;
    background-size: 0;
}

.store-upgrade.animated::after { 
    animation: theButtonAnimation linear 1.5s forwards;
    background-image: 
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%),
        radial-gradient(circle, transparent 25%,  #ffd700 50%, transparent 60%);
}

@keyframes theButtonAnimation {
    0% {
        
        background-size: 61px 61px,50px 50px,42px 42px,55px 55px,59px 59px,56px 56px,51px 51px,50px 50px,64px 64px,63px 63px;
        background-position: 505px 495px,488px 517px,464px 521px,435px 498px,425px 470px,435px 445px,460px 431px,488px 432px,504px 441px,513px 468px;
    }
    4.3% {
        
        background-size: 50px 50px,39px 39px,34px 34px,45px 45px,47px 47px,48px 48px,41px 41px,41px 41px,55px 55px,54px 54px;
        background-position: 565px 553px,518px 583px,453px 581px,431px 509px,387px 483px,384px 404px,449px 399px,502px 412px,517px 437px,570px 475px;
    }
    8.6% {
        
        background-size: 40px 40px,30px 30px,28px 28px,37px 37px,38px 38px,41px 41px,32px 32px,34px 34px,47px 47px,47px 47px;
        background-position: 592px 577px,532px 611px,449px 606px,421px 520px,370px 490px,365px 388px,445px 383px,511px 398px,533px 430px,597px 478px;
    }
    13% {
        
        background-size: 32px 32px,24px 24px,23px 23px,31px 31px,31px 31px,35px 35px,26px 26px,29px 29px,40px 40px,40px 40px;
        background-position: 605px 588px,540px 623px,449px 618px,413px 528px,363px 493px,358px 381px,444px 374px,518px 388px,547px 423px,611px 480px;
    }
    17.3% {
        
        background-size: 26px 26px,18px 18px,18px 18px,25px 25px,25px 25px,30px 30px,20px 20px,24px 24px,34px 34px,34px 34px;
        background-position: 612px 592px,545px 629px,449px 624px,407px 534px,359px 494px,356px 378px,444px 368px,523px 381px,557px 417px,620px 480px;
    }
    21.7% {
        
        background-size: 21px 21px,14px 14px,15px 15px,21px 21px,20px 20px,25px 25px,16px 16px,20px 20px,29px 29px,30px 30px;
        background-position: 618px 595px,549px 632px,450px 627px,402px 538px,357px 494px,355px 375px,445px 363px,527px 375px,566px 413px,627px 480px;
    }
    26% {
        
        background-size: 17px 17px,11px 11px,12px 12px,17px 17px,16px 16px,22px 22px,13px 13px,16px 16px,25px 25px,25px 25px;
        background-position: 622px 596px,551px 634px,450px 629px,398px 541px,355px 494px,355px 373px,445px 359px,530px 369px,572px 408px,633px 480px;
    }
    30.4% {
        
        background-size: 14px 14px,8px 8px,10px 10px,14px 14px,13px 13px,19px 19px,10px 10px,14px 14px,22px 22px,22px 22px;
        background-position: 625px 597px,554px 636px,450px 631px,394px 543px,353px 493px,355px 370px,445px 355px,533px 364px,578px 404px,638px 479px;
    }
    34.7% {
        
        background-size: 11px 11px,6px 6px,8px 8px,11px 11px,10px 10px,16px 16px,8px 8px,11px 11px,18px 18px,19px 19px;
        background-position: 628px 597px,556px 637px,450px 632px,391px 545px,351px 492px,355px 368px,445px 350px,535px 359px,583px 400px,642px 478px;
    }
    39.1% {
        
        background-size: 9px 9px,5px 5px,6px 6px,9px 9px,8px 8px,13px 13px,6px 6px,9px 9px,16px 16px,16px 16px;
        background-position: 631px 597px,558px 638px,450px 634px,387px 546px,349px 491px,355px 365px,445px 346px,537px 355px,587px 396px,646px 477px;
    }
    43.4% {
        
        background-size: 7px 7px,4px 4px,5px 5px,8px 8px,6px 6px,11px 11px,5px 5px,8px 8px,13px 13px,14px 14px;
        background-position: 634px 597px,559px 638px,450px 635px,384px 546px,347px 489px,354px 363px,445px 342px,539px 350px,591px 392px,650px 475px;
    }
    47.8% {
        
        background-size: 6px 6px,3px 3px,4px 4px,6px 6px,5px 5px,10px 10px,4px 4px,6px 6px,11px 11px,12px 12px;
        background-position: 636px 596px,561px 638px,449px 635px,381px 546px,344px 487px,354px 360px,445px 338px,540px 345px,594px 389px,654px 473px;
    }
    52.1% {
        
        background-size: 5px 5px,2px 2px,3px 3px,5px 5px,4px 4px,8px 8px,3px 3px,5px 5px,10px 10px,10px 10px;
        background-position: 639px 596px,562px 639px,449px 636px,378px 546px,342px 485px,353px 357px,444px 333px,542px 341px,597px 385px,657px 471px;
    }
    56.5% {
        
        background-size: 4px 4px,1px 1px,3px 3px,4px 4px,3px 3px,7px 7px,2px 2px,4px 4px,8px 8px,9px 9px;
        background-position: 641px 595px,564px 639px,448px 637px,375px 545px,340px 482px,353px 354px,444px 329px,543px 337px,600px 381px,660px 469px;
    }
    60.8% {
        
        background-size: 3px 3px,1px 1px,2px 2px,3px 3px,2px 2px,6px 6px,2px 2px,3px 3px,7px 7px,7px 7px;
        background-position: 643px 594px,565px 639px,448px 637px,372px 545px,338px 480px,352px 351px,444px 325px,544px 332px,602px 377px,663px 467px;
    }
    65.2% {
        
        background-size: 2px 2px,1px 1px,2px 2px,3px 3px,2px 2px,5px 5px,1px 1px,3px 3px,6px 6px,6px 6px;
        background-position: 645px 593px,566px 639px,447px 638px,369px 544px,336px 478px,352px 348px,443px 321px,545px 328px,605px 373px,666px 465px;
    }
    69.5% {
        
        background-size: 2px 2px,0px 0px,1px 1px,2px 2px,1px 1px,4px 4px,1px 1px,2px 2px,5px 5px,5px 5px;
        background-position: 647px 592px,567px 639px,446px 638px,366px 543px,334px 475px,351px 344px,443px 317px,546px 324px,607px 369px,668px 462px;
    }
    73.9% {
        
        background-size: 1px 1px,0px 0px,1px 1px,2px 2px,1px 1px,4px 4px,1px 1px,2px 2px,4px 4px,4px 4px;
        background-position: 649px 591px,569px 639px,445px 638px,363px 541px,331px 472px,350px 341px,443px 313px,546px 320px,609px 366px,671px 460px;
    }
    78.2% {
        
        background-size: 1px 1px,0px 0px,1px 1px,1px 1px,1px 1px,3px 3px,0px 0px,1px 1px,4px 4px,4px 4px;
        background-position: 651px 589px,570px 639px,444px 638px,360px 540px,329px 470px,350px 338px,442px 309px,547px 315px,610px 362px,673px 457px;
    }
    82.6% {
        
        background-size: 1px 1px,0px 0px,0px 0px,1px 1px,1px 1px,2px 2px,0px 0px,1px 1px,3px 3px,3px 3px;
        background-position: 652px 588px,571px 639px,443px 639px,357px 539px,327px 467px,349px 335px,442px 305px,548px 311px,612px 358px,675px 455px;
    }
    86.9% {
        
        background-size: 0px 0px,0px 0px,0px 0px,1px 1px,0px 0px,2px 2px,0px 0px,1px 1px,3px 3px,3px 3px;
        background-position: 654px 587px,572px 638px,442px 639px,355px 537px,325px 464px,348px 332px,442px 301px,548px 307px,613px 354px,677px 452px;
    }
    91.3% {
        
        background-size: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,2px 2px,0px 0px,1px 1px,2px 2px,2px 2px;
        background-position: 656px 585px,574px 638px,441px 639px,352px 535px,324px 461px,348px 328px,441px 297px,549px 303px,615px 350px,679px 449px;
    }
    95.6% {
        
        background-size: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,1px 1px,0px 0px,0px 0px,2px 2px,2px 2px;
        background-position: 658px 584px,575px 638px,440px 639px,349px 534px,322px 459px,347px 325px,441px 293px,549px 299px,616px 347px,681px 446px;
    }
    100% {
        
        background-size: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,1px 1px,0px 0px,0px 0px,1px 1px,1px 1px;
        background-position: 660px 582px,576px 638px,439px 639px,347px 532px,320px 456px,346px 322px,440px 289px,550px 296px,617px 343px,683px 444px;
    }
}

.store-upgrade.particles::after {
    left: -444.5px;
    top: -444.5px;
    min-width: 1000px;
    min-height: 1000px;
}*/


/*///////////////////////////////////////////////////////////*/
/*////////////////////// STATS SCREEN //////////////////////*/
/*/////////////////////////////////////////////////////////*/

#stats-screen:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 50%;
    width: 75%;
    height: 130%;
    opacity: 0.4;
    background-image: url(./img/bg/stbg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    overflow: hidden;
}

.stat-item {
    width: 100%;
    padding: 10px;
    margin: 20px 15px;
    /*border: 1px solid #e6e6e6;*/
    /*border-radius: 12px;*/
    text-align: center;
    /*box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #FFD700, inset 0 0 12px #FFD700, inset 0 0 13px #FFD700, inset 0 0 28px #FFD700, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #FFD700, 0 0 12px #FFD700, 0 0 13px #FFD700, 0 0 28px #FFD700;*/
}

.stat-item h3 {
    font-size: 1.2rem;
    font-family: monospace;
    font-weight: normal;
    margin: 10px 0 0 0;
}

.stat-item p {
    font-size: 1.8rem;
    margin: 6px;
    font-family: 'Monoton';
    word-spacing: 6px;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #FFD700) drop-shadow(0 0 11px #FFD700);
}


/*////////////////////////////////////////////////////////////*/
/*/////////////////// ACHIEVEMENTS SCREEN ///////////////////*/
/*//////////////////////////////////////////////////////////*/


#achievements-screen:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 50%;
    width: 75%;
    height: 130%;
    opacity: 0.4;
    background-image: url(./img/bg/abg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    overflow: hidden;
}

#achievements, #stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.achievements-items-container, .stats-items-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
}

.achievement {
    width: 100%;
    padding: 10px;
    margin: 15px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #F54437, inset 0 0 12px #F54437, inset 0 0 13px #F54437, inset 0 0 28px #F54437, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #F54437, 0 0 12px #F54437, 0 0 13px #F54437, 0 0 28px #F54437;
    text-align: center;
}

.achievement h3 {
    font-size: 1.2rem;
    font-family: 'Monoton';
    font-weight: normal;
    margin: 10px 0 0 0;
    word-spacing: 6px;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #F54437) drop-shadow(0 0 11px #F54437);
}

.achievement.unlocked {
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #4CAF50, inset 0 0 12px #4CAF50, inset 0 0 13px #4CAF50, inset 0 0 28px #4CAF50, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #4CAF50, 0 0 12px #4CAF50, 0 0 13px #4CAF50, 0 0 28px #4CAF50;
    background: rgb(76 175 80 / 12%);
}

.achievement.unlocked h3 {
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #4CAF50) drop-shadow(0 0 11px #4CAF50);
}

.achievements-intro {
    max-width: 40rem;
}

@media (min-width: 768px) { 
    
    .achievements-items-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stats-items-container {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .achievement {
        width: 40%;
    }

    .stat-item {
        width: 40%;
    }
}



/*///////////////////////////////////////////////////////////*/
/*/////////////////// ACHIEVEMENTS POPUP ///////////////////*/
/*/////////////////////////////////////////////////////////*/

.achievement-popup {
    visibility: hidden;
    position: fixed;
    top: 10px;
    left: 50%;
    padding: 10px 20px;
    background-color: #222;
    color: white;
    border-radius: 5px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    text-align: center;
    min-width: 20rem;
    border: 2px solid #e6e6e6;
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #4CAF50, inset 0 0 12px #4CAF50, inset 0 0 13px #4CAF50, inset 0 0 28px #4CAF50, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #4CAF50, 0 0 12px #4CAF50, 0 0 13px #4CAF50, 0 0 28px #4CAF50;
}

.achievement-icon {
    margin-right: 8px;
}

.achievement-icon.spin {
    animation: spinAnimation 2s infinite linear; 
}

.achievement-icon svg {
    /*animation: spinAnimation 2s infinite; */
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #ffd700) drop-shadow(0 0 7px #ffd700);
    transition: filter 0.1s ease-in-out;
}

.achievement-text {
    font-size: 16px;  /* Adjust as needed */
}

.achievement-messages > div {
    opacity: 0;  /* Both texts are initially hidden */
    transition: opacity 0.3s;  /* Adjust as needed */
    transform: translate(0%, -50%);
}

.achievement-messages {
    position: relative;
    width: 100%;
}


.achievement-unlocked, 
.achievement-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* ensure they span the full width of the parent container */
}

.achievement-unlocked {
    font-size: 1rem;
    font-family: 'Monoton';
    word-spacing: 6px;
    color: #e6e6e6;
    filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 0px #ffd700) drop-shadow(0 0 11px #ffd700);
}

.achievement-details {
    color: #e6e6e6;
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 0px #ffd700, 0 0 10px #ffd700, 0 0 13px #ffd700;
}

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 0.5s;  /* Adjust as needed */
    animation-fill-mode: forwards;
}

.fadeOut {
    animation-name: fadeOutAnimation;
    animation-duration: 1s;  /* Adjust as needed */
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOutAnimation {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-50px) translateX(-50%);  /* slide from 50px above its original position */
    }
    70% {
        opacity: 1;
        transform: translateY(10px) translateX(-50%);   /* move 10px below its intended position */
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);      /* slide back to its intended position */
    }
}

@keyframes slideFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) translateX(-50%);  /* slide 50px upwards */
    }
}

/* Use the animations for the entire popup */
.achievement-popup.slideFadeIn {
    animation-name: slideFadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.achievement-popup.slideFadeOut {
    animation-name: slideFadeOut;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes spinAnimation {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}


/*//////////////////////////////////////////////////////////*/
/*///////////////////// NOTIFICATIONS /////////////////////*/
/*////////////////////////////////////////////////////////*/

#notification-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 400px;
    z-index: 100;
    box-sizing: border-box;
}

.notification {
    background-color: #333;
    color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
     transform: translateX(100%); /* Start off the right edge */
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* Smooth transition for slide-in and fade-out */
}

.notification .title {
    font-family: 'Monoton';
    font-size: 1.2rem;
    word-spacing: 6px;
    margin-bottom: 8px;
    margin-right: 18px;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #fff);
}

.notification .not-msg {
    margin-right: 12px;
}

.notification .not-close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    font-size: 1.7rem;
}

/* Different styling options */
.notification.info {
    background-color: rgb(255 215 0 / 95%);
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #FFD700, inset 0 0 12px #FFD700, inset 0 0 13px #FFD700, inset 0 0 28px #FFD700, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #FFD700, 0 0 12px #FFD700, 0 0 13px #FFD700, 0 0 28px #FFD700;
}

.notification.success {
    background-color: rgb(76 175 80 / 95%);
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #4CAF50, inset 0 0 12px #4CAF50, inset 0 0 13px #4CAF50, inset 0 0 28px #4CAF50, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #4CAF50, 0 0 12px #4CAF50, 0 0 13px #4CAF50, 0 0 28px #4CAF50;
}

.notification.warning {
    background-color: rgb(245 68 55 / 95%);
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #F54437, inset 0 0 12px #F54437, inset 0 0 13px #F54437, inset 0 0 28px #F54437, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #F54437, 0 0 12px #F54437, 0 0 13px #F54437, 0 0 28px #F54437;
}

/*Notification animations*/
.notification.show {
    transform: translateX(0); /* Slide into natural position */
}

.notification.hide {
    transform: translateX(100%); /* Slide out to the right */
    opacity: 0;
}










/*/////////////////////////////////////////////////////////*/
/*//////////////////////// MODALS ////////////////////////*/
/*///////////////////////////////////////////////////////*/


/* Player Upgrades Modal base style */
.modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); 
    z-index: 50;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #424242;
    box-shadow: inset 0 0 5px #fff, inset 0 0 6px #fff, inset 0 0 8px #e6e6e6, inset 0 0 12px #e6e6e6, inset 0 0 13px #e6e6e6, inset 0 0 28px #e6e6e6, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #e6e6e6, 0 0 12px #e6e6e6, 0 0 13px #e6e6e6, 0 0 28px #e6e6e6;
    border-radius: 8px;
}

.modal-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-trigger {
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.5em;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #e6e6e6);
    transition: filter 0.2s ease;
}

.modal-title {
    font-family: 'Monoton';
    word-spacing: 6px;
    text-transform: uppercase;
    font-weight: normal;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #fff);
}

.modal-trigger:hover {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px #e6e6e6) drop-shadow(0 0 8px #e6e6e6);
}

.modal-trigger svg {
    height: 1.5rem;
    fill: #e6e6e6;
}

.modal-content .bold {
    color: #161616;
}




/*//////////////////////////////////////////////////////////*/
/*///////////////////// MEDIA QUERIES /////////////////////*/
/*////////////////////////////////////////////////////////*/

/* Media Query for Mobile Devices */
@media (max-width: 768px) { 
    .store-row {
        flex-direction: column; /* Makes columns stack vertically */
        align-items: stretch; /* Ensures each column takes full width */
    }

    .store-column {
        margin-bottom: 35px; /* Add space between columns when they're stacked */
    }


    #notification-container {
        width: 100%; /* Subtracting for left and right 10px padding */
        right: 0; /* Resetting the right value */
        padding: 0 12px; /* Adding 10px padding on left and right */
    }

    .modal-content {
        top: 50%;
        width: 80%;
        transform: translate(-50%, -50%);
        padding: 5% 3%;
        overflow-y: auto;
    }
}

/* Media Query for Desktop Devices */
@media (min-width:  768px) {
    #store-screen:before, #settings-screen:before, #battle-screen:before {
        transform: translate(-50%, -50%);
    }

    #achievements-screen:before, #stats-screen:before {
        transform: translate(-50%, -40%);
    }
}