body {
  font-family: 'Raleway', sans-serif;
  font-family: 'Silkscreen', sans-serif;
  color: whitesmoke;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #252525;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.mainUIBackground {
  width: 100%;
  height: 100%;
  perspective: 500px;
  perspective-origin: 50% 100px;
  background-color: rgb(218, 242, 248);
  background-image: url('backgroundHell.webp');
  position: relative;
}

.mainUI {
  display: none;
  flex-direction: column;
  background-color: rgb(86, 13, 170);
  border: 3px solid black;
  height: 90%;
  width: 80%;
  max-width: 1750px;
}

.cardSelectionDiv,
.cardDrawDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 10px solid aqua;
  background-color: rgba(128, 0, 0, 0.87);
  width: 60%;
  height: 45%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:  auto;
  margin-top: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  z-index: 4;
}

.deckViewer {
  display: none;
  flex-direction: column;
  align-items: center;
  border: 10px solid aqua;
  background-color: rgba(128, 0, 0, 0.87);
  width: 1400px;
  height: 750px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:  auto;
  margin-top: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
}

.cardDrawDiv {
  display: none;
  flex-direction: column;
  align-items: center;
  border: 10px solid aqua;
  background-color: rgba(128, 0, 0, 0.87);
  width: 1400px;
  height: 750px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:  auto;
  margin-top: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
}

#drawCardDisplay {
  border: 3px solid blue;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* This ensures the child elements wrap within the flex container */
}

.cardDrawInnerTopRow {
  font-size: 0.8rem;
  gap: 1%;
  display: flex;
  flex-direction: row;
}

.deckViewerInnerTopRow {
  display: flex;
  flex-direction: row;

  gap: 100px;
}

.deckViewerCards{
  display: flex;
  flex-wrap:wrap;
  height: 90%;
  width: 90%;
  overflow-y: auto;
}
.deckViewerCards > div {
  width: 10%;
  height: 24%;
}
.deckViewerCards > div:hover {
  transform: none;
}

#threeCardDisplay {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}

#cardSelectionExitButton {

}

.bottomLeftInnerRightContainer {
  width: 25%;
}

/* Cards */

.cardBase {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  max-width: 135px;
  max-height: 200px;
  width: 100%;
  margin: 1%;
  height: 200%;
  font-size: .7rem;
  text-align: center;
}

@keyframes glow2 {
  from {
    box-shadow: 0 0 5px rgb(255, 230, 0);
  }
  to {
    box-shadow: 0 0 20px rgb(255, 198, 12);
  }
}



.cardTrim {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 90%;
  height: 92%;
  border: 1px solid gold;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  /* border: 1px solid greenyellow; */
  height: 8%;
  border: 1px solid gold;
}

.cardRar {
  width: 20%;
  font-size: 0.5rem;
  margin-left:5%;
}
.cardEne {
  color: gold;
  width: 30%;
  font-size: 0.5rem;
}

.cardPic {
  border: 2px solid rgba(255, 217, 0, 0.918);
  height: 85%;
  background-size: 100% 100%;
}
.cardDes {
  border: 1px solid gold;
  height: 30%;
  font-size: 0.55rem;
  padding: 1%;
}


/* basic card colors and trims */
.basic {
  
  --a:80deg;
  --l:15%;
  --c:#6b5f58;
  /**/
  cursor:pointer;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),#bff1f0d8,var(--c) calc(100% - var(--l)));
}

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.basic:hover {
  --a:360deg;
  --l:40%;
  --c:#424242;
  transform: scale(1.65);
  transition: --a .8s, --l 0.8s, --c 0.8s, transform 0.8s ease;
}

.basicCardTrim {
  border: 3px solid #86769A;
}

.basicCardHeader {
}

.basicCardRar {
  background-color: #86769A;
}

.basicCardEne {
  background-color: #252525;
}

.basicCardName {
  background-color: #86769A;
}

.basicCardPic {

}

.basicCardDes {

}

/* uncommon card colors and trims */

.uncommon {
  
  --a:80deg;
  --l:15%;
  --c:#6773B0;
  /**/
  cursor:pointer;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),#baa4d4,var(--c) calc(100% - var(--l)));
}

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}


.uncommon:hover {
  --a:360deg;
  --l:40%;
  --c:#464E6E;
  transform: scale(1.75);
  transition: --a .8s, --l 0.8s, --c 0.8s, transform 0.8s ease;
}

.uncommonCardTrim {
  border: 3px solid #86769A;
}

.uncommonCardHeader {
}

.uncommonCardRar {
  background-color: #86769A;
}

.uncommonCardEne {
  background-color: #252525;
}

.uncommonCardName {
  background-color: #86769A;
}

.uncommonCardPic {

}

.uncommonCardDes {

}
/* uncommon card colors and trims */

.rare {
  --a: 80deg;
  --l: 15%;
  --c: #b41515;
  cursor: pointer;
  background: linear-gradient(var(--a), var(--c) var(--l), #f7bbbb, var(--c) calc(100% - var(--l)));
  /* Updated transition to include custom properties */
  transition: --a .8s, --l 0.8s, --c 0.8s, transform 0.8s ease;
}

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.rare:hover {
  --a: 720deg; /* Updated to 90deg for clear visual change */
  --l: 45%;
  --c: #b30606;
  transform: scale(1.95);
}

.rareCardTrim {
  border: 3px solid #86769A;
}

.rareCardHeader {
}

.rareCardRar {
  background-color: #86769A;
}

.rareCardEne {
  background-color: #252525;
}

.rareCardName {
  background-color: #86769A;
}

.rareCardPic {

}

.rareCardDes {

}
/* uncommon card colors and trims */

.legendary {
  --a: 80deg;
  --l: 15%;
  --c: #fd5ef5;
  cursor: pointer;
  background: linear-gradient(var(--a), var(--c) var(--l), #7eddd8, var(--c) calc(100% - var(--l)));
  /* Updated transition to include custom properties */
  transition: --a .8s, --l 0.8s, --c 0.8s, transform 0.8s ease;
  animation: glow 1.5s infinite alternate;
}

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c {
  syntax: '<color>';
  inherits: false;
  initial-value: rgb(255, 0, 149);
}

.legendary:hover {
  --a: 720deg; /* Updated to 90deg for clear visual change */
  --l: 40%;
  --c: rgb(255, 0, 149);
  transform: scale(1.95);
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgb(11, 239, 255);
  }
  to {
    box-shadow: 0 0 20px rgb(88, 244, 255);
  }
}

.legendaryClicked {
  transform: rotateX(180deg)
}

.legendaryCardTrim {
  border: 3px solid #86769A;
}

.legendaryCardHeader {
}

.legendaryCardRar {
  background-color: #86769A;
}

.legendaryCardEne {
  background-color: #252525;
}

.legendaryCardName {
  background-color: #86769A;
}

.legendaryCardPic {

}

.legendaryCardDes {

}

/* Dummy Card Styling */
.dummy {
  
  --a:80deg;
  --l:15%;
  --c:#51ff00;
  /**/
  cursor:pointer;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),#9606b3d8,var(--c) calc(100% - var(--l)));
}

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.dummy:hover {
  --a:360deg;
  --l:40%;
  --c:#174d06;
  transform: scale(1.65);
  transition: --a .8s, --l 0.8s, --c 0.8s, transform 0.8s ease;
  color: red;
}

/* menu module styles */
/* html {
  overflow: hidden;
  color: black;
  font-family: fantasy;
  width: 1920px;
  height: 1080px;
  margin: auto;
} */

.startScreenContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("backgroundEvilJungle.png");
  background-color: rgb(15, 17, 17);
  background-repeat:repeat;
  background-position: center;
  border: 10px solid cyan;
  width: 90%;
  height: 95%;
}

.bossScreenContainer {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("backgroundWorkshop.webp");
  background-color: rgb(15, 17, 17);
  background-repeat:repeat;
  background-position: center;
  border: 10px solid red;
  width: 90%;
  height: 95%;
}

.cardsViewMenu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("backgroundTaskmaster.webp");
  background-color: #b30606;
  background-repeat:repeat;
  background-position: center;
  border: 10px solid #b30606;
  width: 90%;
  height: 95%;
}

.cardViewerMenuContainer {
  border: 3px solid red;
  width: 90%;
  height: 95%;
  background: #252525a6;
}

.cardViewerMenuInnerContainer {
  border: 3px solid red;
  height: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#cardViewMenuExitButton {
  position: absolute;
  border: 3px solid red;
  background-color: maroon;
}
#cardViewMenuExitButton:hover {
  position: absolute;
  border: 3px solid aqua;
  background-color: rgba(0, 255, 255, 0.623);
  color: white;
}

.card {
  margin: 10px 10px;
}

.titleBox1,
.titleBox2 {
  background-color: rgba(0, 255, 255, 0.623);
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  border: 3px solid cyan;
  height: 120px;
  border-radius: 5px;
}

.titleBox1 {
  font-size: 48px;
  margin: 30px 0px 200px 0px;
  width: 800px;
}

.titleBox2 {
  font-size: 36px;
  margin: 30px auto;
  width: 400px;
}

.titleBox2:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.bossTitleInnerContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  width: 100%;
}

.bossTitleDevider {
  border: 3px solid cyan;
  width: 500px;
  margin: 10px;
}

.bossTitle {
  background-color: rgba(0, 255, 255, 0.623);
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  border: 3px solid cyan;
  height: 120px;
  border-radius: 5px;
  margin: 10px 10px;
}

.bossTitle:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.exitButtonContainer {
  justify-content: right;
  /* border: 3px solid red; */
  margin: 10px 10px;
  display: flex;
  align-items: end;
}

.deathScreen{
  border: 10px solid red;
  color: red;
  background-color: #252525;
  position: absolute;
  padding: 3%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.victoryScreen,
.storyScreens{
  border: 10px solid aqua;
  color: aqua;
  background-color: rgb(150, 148, 148);
  position: absolute;
  padding: 3%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.victoryScreen{
  display: none;
}

.deathScreen p {
  margin: 3% 0 9% 0;
}

.deathScreen a {
  color: white;
}

.exitButton {
  background-color: rgba(18, 119, 119, 0.836);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid cyan;
  width: 100px;
  height: 50px;
}

.exitButton:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
}

.disabledSelected {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.90;
}

.greenDisabled {
  background-color: green;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
}

.redDisabled {
  background-color: red;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
}

.disabled-card {
  pointer-events: none; /* Prevents clicking */
  opacity: 0.5; /* Makes the card appear faded */
}

 
/* playerfield BETA CSS */

  
  .playing-field-container {
    width: 80%;
    height: 80%;
    transform-style: preserve-3d;
    position: relative;
    margin: 50px auto;
  }
  
  .playing-field {
    position: absolute;
    width: 100%;
    height: 34%;
    bottom: 20%;
    background: rgb(185, 49, 49);
    transform: rotateX(75deg);
    transform-origin: bottom;
    border-radius: 10px;
  }
  
  .field-side {
    position: absolute;
    bottom: -5%;
    width: 100%;
    height: 19%; /* Adjust for desired thickness */
    background: rgb(134, 29, 29); /* Darker to simulate shadow */
    transform-origin: top;
    transform: rotateX(-90deg);
    border-radius: 10px;
  }

  .hpAndShieldContainer {
    /* border: 1px solid red; */
    width: 15%;
    height: 15%;
    position: absolute;
    right: 3%;
    top: 10%;
    display: flex;
    flex-direction: column;
  }

  .enemyHPTopHalf {
    /* border: 1px solid green; */
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    position: relative;
  }
  
  .playerHPLowerHalf {
    position: relative;
    /* border: 1px solid blue; */
    height: 50%;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .currentPlayerHP,
  .maxPlayerHP {
    font-size: 2rem;
    color: lime;
  }

  .playerShieldDiv {
    position: absolute;
    border: 3px solid aqua;
    background-color: #252525ad;
    width: 4%;
    height: 50%;
    bottom: 75%;     
    left: 10%;
    margin: auto;
    border-radius: 50%;
    font-size: 2rem;;
  }

  .hpAndShieldContainerPlayerHP {
    border: 3px solid aqua;
    background-color: rgba(22, 15, 4, 0.5);
    width: 50%;
    text-align: center;
  }

  .hpAndShieldContainerPlayerName {
    border: 2px solid aqua;
    background-color: rgb(41, 98, 221);
    height: 45%;
    width: 35%;
    position: absolute;
    top: 0;
    left: 0; 
  }

  .hpAndShieldContainerEnemyName {
    border: 2px solid red;
    background-color: #660f99c0;
    height: 45%;
    width: 35%;
    position: absolute;
    bottom: 0;
    left: 0; 
  }
  .enemyHP {
    color: red;
    border: 2px solid red;
    background-color: #660f99c0;
    font-size: 2rem;
    width: 50%;
    text-align: center;
}

  .enemyStatusEffects {
    font-size: 1rem;
    text-align: center;
    height: 100%;
}
  .enemyShield {
    background-color: #660f99c0;
    border: 2px solid rgb(0, 255, 42);
    border: 2px solid red;
    height: 45%;
    width: 35%;
    position: absolute;
    bottom: 0;
    right: 0; 
  }

/* LOCATED UNDERNEATH ENEMY PROTRAIT */
  .enemyShieldDiv {
    border: 2px solid aqua;
    width: 8%;
    height: 125%;
    position: absolute;
    left: 37%;
    bottom: 50%;
    border-radius: 50%;
  }

  .topBarPlayerHP {
    font-size: 2rem;
    /* border: 3px solid yellow; */
    background-color: rgba(22, 15, 4, 0.5);
    width: 50%;
    text-align: center;
  }

  .hpAndShieldContainerPlayerShield {
    border: 2px solid aqua;
    background-color: rgb(18, 198, 230);
    height: 45%;
    width: 35%;
    position: absolute;
    top: 0;
    right: 0; 
  }

  .enemyName,
  .enemyHP,
  .enemyShield,
  .playerName,
  .playerHP,
  .topButton,
  .playFieldDeckList,
  .graveyard,
  .deckListNumberDiv,
  .graveyardNumberDiv,
  .playerShieldDiv,
  .notificationMessage {   
    display: flex;
    justify-content: center;
    align-items: center ;
  }

  .bottomHalf{
    width: 90%;
    height: 20%;
    border: 3px solid aqua;
    background-color: rgb(22, 15, 4);
    border-radius: 10px;
    display: flex;
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: auto;
    justify-content: space-around;
}

.mainUITopContainer {
  border: 3px solid aqua;
  background-color: #2525257c;
  position: absolute;
  width: 100%;
  height:8%;
  top: 0;
  z-index: -1;
  margin: auto;
  display: flex;
justify-content: space-between;}

.topInnerLeftContainer,
.topInnerRightContainer {
  color: gold;
  border: 3px solid aqua;
  width: 30%;
  display: flex;
  font-size: 1.5rem;
}

#playerNameTopBarDiv {
  margin-left: 5%;
}

/* #playerHpTopBarDiv {
  color: rgb(185, 49, 49);
  font-size: 2.5rem;
  margin-left: 5%;
} */


.topInnerLeftContainer {
  display: flex;
  justify-content: left;
  gap: 15%;
}
.topInnerRightContainer {
  display: flex;
  justify-content: right;
  gap: 15px;
}

.topButton {
  width: 10%;
}

#playerClassTopBarDiv {
  font-size: 1rem;
  margin-right: 5%;
  margin-left: 12%;
}

.bottomTopContainer {
  position: absolute;
  width: 100%;
  height: 10%;
  bottom: 25%;
  margin: auto;
  display: flex;
  justify-content: left;
  align-items: center;
}

.playerBottomEnergyDiv {
  border: 5px solid yellow;
  background-color: #660f99c0;
  width: 5%;
  height: 100%;
  margin-left: 2%;
  border-radius: 50%;
}

.playerEnergy {
  color: yellow;
  font-size: 2rem;
}

/* fading text */

.fading-text {
  position: relative;
  overflow: hidden;
  height: 200px; /* Adjust height as needed */
  width: 300px; /* Adjust width as needed */
}

@keyframes fadeAndFloat {
  0% {
      opacity: 1;
      transform: translateY(0);
  }
  100% {
      opacity: 0;
      transform: translateY(100%);
  }
}

.fading-text p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 10px;
  animation: fadeAndFloat 5s linear forwards;

}

/* notifcations */

.damage-text {
  animation: grow-shrink 2.0s ease-in-out forwards;
}

.notificationMessage {
  position: absolute;
  width: 100%;
  height: 30%;
  top: 60%;
}

@keyframes grow-shrink {
  0% { transform: scale(1); }
  50% { transform: scale(3); } /* Adjust scale value to desired maximum size */
  100% { transform: scale(1); }
}

.playerDamageNotificationDiv {
  font-size: 2rem;
  position: absolute;
  width: 7%;
  height: 175%;
  bottom: 33%;     
  left: 4%;
  margin: auto;
  color: red;
  
}
.playerShieldNotificationDiv {
  font-size: 2rem;
  position: absolute;
  /* border: 3px solid blue; */
  width: 7%;
  height: 125%;
  bottom: 33%;     
  left:7%;
  z-index: 4;
  margin: auto;
  color: red;
}

.hpAndShieldContainerEnemyShieldNotificationDiv {
  font-size: 2rem;
  /* border: 2px solid red; */
  width: 10%;
  height: 8%;
  position: absolute;
  right: 2%;
  top: 10%;
  color: red;
}

.playerShieldAdditionNotification {
  font-size: 2rem;
}

.shield1 {
  /* border: 3px solid yellow; */
  color: aqua;
  position: absolute;  
  width: 30%;
  left: 50%;
}

.shield2 {
  bottom: 65%;
  width: 100%;
  height:30%;
  left: 45%;
  /* border: 3px solid green; */
  color: aqua;
  position: absolute; 
}

.playerStatusEffectDamageNotification {
  font-size: 2rem;
  position: absolute;
  /* border: 3px solid blue; */
  color: greenyellow;
  width: 7%;
  height: 175%;
  bottom: 33%;     
  left: 0%;
  margin: auto;
}

.enemyDamageNotification {
  color: red;
  /* border: 2px solid blue; */
}

.hpAndShieldContainerEnemyDamageNotificationDiv{
  font-size: 2rem;
  /* border: 2px solid blue; */
  width: 10%;
  height: 8%;
  position: absolute;
  right: 12%;
  top: 10%;
}

.hpAndShieldContainerPlayerDamageNotificationDiv{
    font-size: 2rem;
  /* border: 2px solid blue; */
  width: 10%;
  height: 8%;
  position: absolute;
  right: 12%;
  top: 18%;
  color: red;
}
.hpAndShieldContainerPlayerShieldNotificationDiv{
  /* border: 2px solid aqua; */
    font-size: 2rem;
  /* border: 2px solid blue; */
  width: 10%;
  height: 8%;
  position: absolute;
  right: 1%;
  top: 20%;
  color: red;
  display: flex;
  justify-content: right;
}

.hpAndShieldContainerPlayerStatusEffectDamageNotificationDiv{
  font-size: 2rem;
  /* border: 2px solid green; */
  width: 10%;
  height: 8%;
  position: absolute;
  right: 12%;
  top: 21%;
  color: greenyellow;
}

.damageDealtToPlayer{
  color: red;
  border: 1px solid red;
  height: 100%;
}

.playerEnergyNotification {
  font-size: 2rem;
  display: none;
  position: absolute;
  border: 3px solid blue;
  width: 7%;
  height: 175%;
  bottom: 33%;     
  left: 11%;
  margin: auto;
}

.playerBottomHpDiv {
  border: 5px solid yellow;
  background-color: #660f99c0;
  width: 7%;
  height: 100%;
  margin-left: 5%;
  border-radius: 50%;
  font-size: 2rem;
}

.playFieldBottomMidContainer {
    width: 100%;
}

.playFieldCardContainer {
    /* border: 3px solid aqua; */
    height: 50%;
    width: 80%;
    margin: auto auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}

.cardInfoContainer {
    height: 40%;
    width: 95%;
    margin: auto auto;
    border: 3px solid aqua;
    background-color: #252525;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 15px;
}

.cardName,
.cardstats,
.cardDesc,
.cardDes {
    /* border: 3px solid green; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardName {
    width: 25%;
}

.cardDesc {
    /* border: 3px solid rgb(162, 0, 255); */
    width: 100%;
    height: 100%;
}

.playFieldDeckList,
.graveyard {
    /* border: 3px solid rgb(162, 0, 255); */
    width: 15%;
    background-color: aqua;
    background-image: url('Nirvosis.png');
    background-size: cover;
  }

.deckListNumberDiv,
.graveyardNumberDiv {
  border: 3px solid rgb(162, 0, 255);
  background-color: rgba(162, 0, 255, 0.63);
  width: 43%;
  height: 40%;
  font-size: 2.3rem;
  border-radius: 50%;
}

/* .deckListNumberDiv{
  position: absolute;
  bottom: 70%;
  left: 9%;
}
.graveyardNumberDiv{
  position: absolute;
  bottom: 70%;
  left: 85%;
  z-index: 2;
} */

.cardName,
.cardRarity,
.cardStats,
.cardDesc,
.endTurnButton,
.playerBottomEnergyDiv,
.playerBottomHpDiv,
.enemyShieldDiv,
.logTopHalf,
.enemyIntentionDiv,
.enemyStatusEffects,
.logTopHalfTitle,
.playerStatusEffectsDiv,
.bossBioName,
.bossBioText,
.introScreen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardStats {
    /* border: 3px solid rgb(255, 0, 0); */
    width: 20%;

}

.cardName {
    /* border: 3px solid rgb(255, 0, 0); */
    width: 20%;
    width: 100%;
}

.cardRarity {
    /* border: 3px solid rgb(255, 0, 0); */
    width: 50%;
}

.card {
    /* border: 1px solid rgb(162, 0, 255); */
    height: 175%;
    width: 17%;
    background: cyan;
}

.enemyDiv {
    /* border: 3px solid rgb(255, 0, 0); */
    width: 41%;
    height: 53%;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enemyPortraitDiv {
    border: 3px solid red;
    z-index: 1;
    width: 45%;
    height: 60%;
    position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
    margin: auto;
    /* background-size:; */
}

.enemyIntentionDiv {
  font-size: 0.8rem;
    position: absolute;
    /* border: 3px solid yellow; */
    width: 100%;
    height: 15%;
    top: 20%;     
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

.enemyDamageNotifcationDiv {
  color: red;
  font-weight: bold;
  position: absolute;
  /* border: 3px solid blue; */
  width: 20%;
  height: 35%;
  top: 50%;     
  right: 40%;
  margin: auto;
  z-index: 2;
  font-size: 3rem;
}

.enemyHpDiv {
  /* border: 3px solid yellow; */
  display: flex;
  width:45%;
  height: 5%;
  position: absolute;
  bottom: -9%;
  z-index: 1;
  padding: 1%;
  border-radius: 15px;
}
.enemyNameDiv {
  /* border: 3px solid yellow; */
  width: 25%;
  height: 100%;
  font-size: 2rem;
  color: red;
}

.enemyStatusEffectsDiv {
  display: flex;
  /* border: 3px solid yellow; */
  width: 20%;
  height: 8%;
  position: absolute;
  bottom: -8.8%;
  left: 35%;
  z-index: 1;
}

.effectBase{ 
  height: 100%;
  width: 100%;
}

.effectEmoji{ 
  padding: 1%;
  font-size: 1.5rem;
}

.effectPotency{ 
  color: red;
}


.logContainer {
  margin-top: 1%;
    /* border: 1px solid red; */
    width: 20%;
    height: 30%;
    position: absolute;
    left: 50px;
    top: 75px;
    display: flex;
    flex-direction: column;
}

.statusEffectsBottomHalf {
  display: flex;
  /* border: 3px solid red; */
  height: 100%;
  width: 100%;
  background-color: #25252588;
}

.playerStatusEffectsDiv {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
}

#consoleLog {
  user-select: all;
  display: none;
  background-color: black;
  width: 100%;
  font-size: 0.5rem;
  color: limegreen;
  padding: 10px;
  margin: 10px 0;
  height: 200px;
  overflow: auto;
  z-index: 1;
  white-space: pre-wrap; /* Keeps the format of your log messages */
}

.logBottomHalf {
  /* border: 3px solid red; */
  height: 100%;
  width: 100%;
  /* background-color: #25252588; */
}

.logTopHalf {
  border: 3px solid aqua;
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
}

.logTopHalfTitle {
  width: 100%;
  height: 100%;
  border: 3px solid aqua;
  color: gold;
}

.statusEffectsBottomHalf {
  border: 3px solid aqua;
  height: 45%;
  background-color: #25252588;
}


.logTopHalfDebugButton {
  width: 20%;
  z-index: 1;
}

.logTopHalfDebugButton:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.endTurnButton {
    width: 10%;
    height: 50px;
    border: 3px solid aqua;
    background-color: rgb(255, 0, 0);
    position: absolute;
    right: 1%;
    bottom: 100%;
}

.endTurnButton:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.comingSoonContainer {
  display: none;
  position: absolute;
  z-index: 10;
  border: 3px solid rgb(0, 255, 42);
  background-color: rgba(10, 10, 10, 0.836);
  width: 35%;
  height: 35%;
  flex-direction: column;
  gap: 2%;
  align-items: center;
}

.returnButton {
  display:flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
  background-color: rgba(10, 10, 10, 0.658);
  width: 10%;
  height: 8%;
  padding: 2%;
}

.returnButton:hover {
  color: rgb(0, 255, 42);
  border: 3px solid rgb(0, 255, 42);
  background-color: #660f99c0;
  transition: 0.3s;
}

.clickable {
  cursor: pointer;
}

.clickedCard {
  border: 3px solid yellow;
}

/* Boss Bio Stuff */
.bossBioMenu {
  border: 10px solid aqua;
  width: 95%;
  height: 90%;
  position: absolute;
  background-color: #252525;
  display: none;
  align-items: center;
  justify-content: center;
  background-image: url('backgroundExtra.webp');
}

.bossBioMenuInnerLeftContainer,
.bossBioMenuInnerRightContainer {
  border: 5px solid aqua;
  background-color: #252525e3;
  width: 47%;
  height: 100%;
}

.bossBioExitButtonContainer {
  position: absolute;
  right: 4%;
  top: 2%;
}

.bossBioMenuInnerContainer {
  display: flex;
  flex-direction: row;
  border: 3px solid aqua;
}

.bossBioPortraitLeftColumn,
.bossBioPortraitRightColumn {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3%;
}

.bossBioPortrait {
  height: 25%;
  width: 30%;
  border: 3px solid aqua;
}
.bossBioPortrait:hover {
  transform: scale(2);
}

.bossBioMenuInnerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  width: 100%;
  height: 87%;
}

.spiderBP {
  background-image: url('enemySpidermonkey.png');
  background-size:contain;
}

.sumoBP {
  background-image: url('enemySumoChimp.png');
  background-size:contain;
}

.oniBP {
  background-image: url('enemyOni.png');
  background-size:contain;
}

.samuraiBP {
  background-image: url('enemySamuraiBaboon.webp');
  background-size:contain;
}

.genieBP {
  background-image: url('enemyGenie.png');
  background-size:contain;
}

.shamanBP {
  background-image: url('enemyVoodooShaman.png');
  background-size:contain;
}

.crystalBP {
  background-image: url('enemyCrystallineEntity.png');
  background-size:contain;
}

.taskMasterBP {
  background-image: url('enemyTaskmaster.png');
  background-size:contain;
}

.corruptionBP {
  background-image: url('enemyBloodCorruption.png');
  background-size:contain;
}

.pretenderBP {
  background-image: url('Pretender.png');
  background-size:contain;
  
}

.bossBioInfoContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; 
  justify-content: center;
  align-items: center;
  gap: 2%;
}

.bossBioPic{
  border: 3px solid aqua;
  width: 40%;
  height: 40%;
  background-size:contain;
}

.bossBioPortrait:active{
  border: 3px solid purple;
}

.bossBioPic:hover{
  width: 70%;
  height: 70%;
  background-size:contain;
}

.bossBioName{
  border: 3px solid aqua;
  width: 40%;
  height: 3%;
}

.bossBioText{
  border: 3px solid aqua;
  background-color: #252525f3;
  width: 65%;
  height: 38%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  overflow-wrap: break-word;
  line-height: 0.9; /* Adjust line height */
}

.bossBioText:hover {
  height: 215%;
  width: 100%;
  overflow: auto;
  overflow-wrap: break-word;
}

.bossBioRedWord {
  color: red;
  margin-top: -1%;
}
.bossBioAquaWord {
  color: red;
}
.bossBioGreenWord {
  color: green;
}

.introScreen {
  position: absolute;
  background: #252525;
  height: 60%;
  width: 70%;
  flex-direction: column;
  border: 10px solid aqua;
}

.introScreen ul {
  list-style-type: none;
  color: aqua;
}
.introScreen h1 {
  color: aqua;
}

.introScreenExitButton {
  position: absolute;
  right: 2%;
  top: 5%;
}