body {
  background-color: #0C1A24;
  color: #e6e6e6;
  font-family: Arial, sans-serif;
}

html {
  margin: 0;
  padding: 0;
  height: var(--app-height, 100vh);
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  height: var(--app-height, 100vh);
  overflow-y: auto;
  overflow-x: hidden;
}

.show {
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #8b8b8b00;
}

#show {
  position: absolute;
  top: 6%;
  left: 0%;
  width: 5.4%;
  height: 90%;
  border-radius: 4px;
  background-color: #162e3f00;
  user-select: none;
}

#show_game {
  position: absolute;
  top: 0%;
  left: 5%;
  width: 90%;
  height: 5%;
  border-radius: 4px;

  user-select: none;
}

#show_mode {
  position: absolute;
  top: 5.4%;
  left: 5%;
  width: 90%;
  height: 6%;
  border-radius: 4px;

  user-select: none;
}

#show_money {
  position: absolute;
  top: 7.5%;
  left: 5%;
  width: 90%;
  height: 6%;
  border-radius: 4px;
  user-select: none;
}

#show_multi {
  position: absolute;
  top: 38%;
  left: 0%;
  width: 99%;
  height: 6%;
  border-radius: 4px;
  user-select: none;
}

#show_bet {
  position: absolute;
  top: 54%;
  left: 5%;
  width: 90%;
  height: 6%;
  border-radius: 4px;
  user-select: none;
}

#show_round {
  position: absolute;
  top: 94%;
  left: 5%;
  width: 90%;
  height: 6%;
}

.Ashow {
  border: #20c997 solid 1px;
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

#show_number {
  position: absolute;
  top: 28%;
  left: 5%;
  width: 90%;
  height: 6%;
}


#money {
  position: absolute;
  top: 0%;
  left: -1%;
  width: 101%;
  height: 6%;
  border-radius: 4px;
  background-color: rgba(30, 43, 55, 0.52);
  user-select: none;
}

#birr {
  position: absolute;
  color: rgb(0, 204, 41);
  font-size: 100%;
  width: 10%;
  height: 90%;
  top: 5.8%;
  left: 107%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#money_box {
  position: absolute;
  color: white;
  font-size: 100%;
  border: #8b8b8b solid 1px;
  width: 10%;
  height: 90%;
  top: 5.8%;
  left: 50%;
  background-color: #0C1A24;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#conves {
  position: absolute;
  background-color: rgb(27, 37, 46);
  width: 70%;
  height: 89%;
  top: 7%;
  left: 28.7%;
  border-radius: 0px 5px 5px 0px;
  user-select: none;
  overflow: hidden;
}

#box {
  position: absolute;
  width: 23%;
  height: 89%;
  top: 7%;
  left: 5.7%;
  background-color: rgb(40, 56, 72);
  border-radius: 10px 0px 0px 10px;
  user-select: none;
}

#balance {
  position: absolute;
  width: 55%;
  height: 3%;
  border-radius: 4px;
  padding: 10px;
  background-color: rgb(30, 43, 55);
  color: white;
  border: rgb(0, 115, 223);
  top: 6%;
  left: 3%;
  font-size: 150%;
}

#bet_amount {
  position: absolute;
  color: white;
  font-size: 130%;
  top: 1%;
  left: 3%;
  user-select: none;
}

#incrementButton {
  position: absolute;
  color: white;
  background-color: rgb(30, 43, 55);
  font-size: 130%;
  width: 15%;
  height: 7%;
  top: 6%;
  ;
  left: 83%;
  cursor: pointer;
  border-radius: 7px;
}

#decrementButton {
  position: absolute;
  color: white;
  background-color: rgb(30, 43, 55);
  font-size: 130%;
  width: 15%;
  height: 7%;
  top: 6%;
  left: 66.8%;
  cursor: pointer;
  border-radius: 7px;
}

#add-ball {
  position: absolute;
  width: 93%;
  height: 10%;
  top: 51%;
  left: 3%;
  border: 0;
  background-color: rgb(29, 165, 15);
  font-size: 100%;
  cursor: pointer;
  border-radius: 7px;
}

#buttons {
  position: absolute;
  top: 20%;
  left: 5.3%;
  width: 100%;
  height: 30%;
  display: grid;
  grid-column-gap: 30%;
  grid-row-gap: 1%;
  grid-template-columns: repeat(2, 50px);
}

.insid {
  width: 250%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: rgb(48, 65, 83);
  border: none;
  font-family: cursive;
  font-size: 150%;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

}

.insid:hover {
  background-color: rgb(78, 103, 130);
  box-shadow: 0 6px 0px #59597e;
}

#insuranceDiv {
  display: none;
  position: absolute;
  top: 42%;
  left: 50%;
  width: 83%;
  height: 38%;
  transform: translate(-50%, -50%);
  background-color: rgb(40, 56, 72);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 1000;
}

#justCards {
  position: absolute;
  border-radius: 7%;
  width: 15%;
  height: 30%;
  pointer-events: none;
  z-index: 1;
  top: -7%;
  left: 77%;
}

#dealerHand {
  position: absolute;
  width: 21%;
  height: 29%;
  top: 2%;
  left: 41%;
  font-size: 100%;
  transform: translateZ(0);
  color: white;
  perspective: 1000px;

  will-change: transform;
}

#hand {
  position: absolute;
  width: 90%;
  height: 38%;
  top: 55%;
  left: 5.5%;
  color: white;
  font-size: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transform: translateZ(0);
  will-change: transform;
}

#hand1 {
  position: absolute;
  width: 19%;
  height: 40%;
  top: 15%;
  left: 29.5%;
  perspective: 1000px;
}

#hand2 {
  position: absolute;
  width: 19%;
  height: 40%;
  top: 15%;
  left: 55.5%;
  perspective: 1000px;
}

#sum {
  position: absolute;
  /* background-color: rgb(48, 48, 45); */
  width: 100%;
  height: 8%;
  top: 53%;
  left: 2%;
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%
}

#sum1 {
  background-color: rgb(40, 56, 72);
  color: white;
  width: 10%;
  height: 65%;
  border-radius: 1in;
  display: flex;
  justify-content: center;
  align-items: center;

}

#sum2 {
  background-color: rgb(40, 56, 72);
  color: white;
  width: 10%;
  height: 65%;
  border-radius: 1in;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dealerSum {
  position: absolute;
  background-color: rgb(40, 56, 72);
  color: white;
  top: 4%;
  left: 31%;
  width: 10%;
  height: 5%;
  border-radius: 1in;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active-hand {
  box-shadow: 0 0 15px #171817;
  border: 2px solid #2b2f2b;

  border-radius: 0.4em;
  transition: all 0.3s ease;
}

/* ===== Global animation disable switch (toggled via the ANIMATIONS setting) ===== */
body.animations-off .flying-card,
body.animations-off .hidden-card,
body.animations-off .reveal-card,
body.animations-off .active-hand,
body.animations-off #back1,
body.animations-off #back2,
body.animations-off #back3 {
  animation: none !important;
  transition: none !important;
}

#back1,
#back2,
#back3 {
  position: absolute;
  width: 90%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 10;
  transform-origin: 50% 50%;
  will-change: transform, box-shadow;
}

/* Dynamic flight animation: arcs up off the deck, tilts mid-flight, settles flat */
@keyframes flyCard {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  45% {
    transform: translate(var(--mx), var(--my)) rotate(var(--rot)) scale(1.08);
    box-shadow: 0 26px 22px -10px rgba(0, 0, 0, 0.55);
  }

  80% {
    transform: translate(calc(var(--tx) * 0.97), calc(var(--ty) * 0.97)) rotate(calc(var(--rot) * -0.25)) scale(1.02);
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.4);
  }

  100% {
    transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

/* Base class for flying cards */
.flying-card {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 90%;
  /* Match default card size */
  height: 100%;
  z-index: 100;
  pointer-events: none;
  display: none;
  /* Hidden by default */
  border-radius: 6%;
}

/* Classes for the destination cards (flip effect) */
.hidden-card {
  opacity: 0;
  transform: rotateY(90deg) scale(0.92);
  transition: opacity 0s, transform 0s;
}

.reveal-card {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
  /* Slight overshoot on landing gives the flip a satisfying "snap" */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease-out;
}

/* Ensure cards have perspective for the flip to look 3D */
.imagehand1,
.imagehand2,
.Dimagehand1 {
  backface-visibility: hidden;
  /* transition: all 0.3s ease; remove old transition if it conflicts */
}


@media (max-width: 900px) {
  #conves {
    position: absolute;
    background-color: rgb(30, 43, 55);
    width: 400px;
    height: 64%;
    top: 6.02%;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
    border-radius: 0%;
  }

  #box {
    position: absolute;
    width: 400px;
    height: 270px;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(40, 56, 72);
    user-select: none;
    border-radius: 0%;
  }

  #justCards {
    width: 20%;
  }



  #money {
    position: absolute;
    width: 400px;
    height: 5.9%;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
  }

  #bet_amount {
    position: absolute;
    color: white;
    font-size: 150%;
    top: 1%;
    left: 3%;
    user-select: none;
  }

  #money_box {

    font-size: 100%;

    width: 25%;
    height: 90%;
    top: 5.8%;
    left: 45%;
  }

  #balance {
    width: 51%;
    height: 12.8%;
    top: 16%;
    left: 3%;
    font-size: 138%;
  }

  #decrementButton {
    font-size: 77%;
    width: 15%;
    height: 18%;
    top: 16%;
    left: 65.8%;
    border: 1px solid rgba(44, 43, 43, 0.224);
  }

  #add-ball {
    width: 94%;
    height: 20%;
    top: 41.9%;
    left: 3%;
    font-size: 100%;
  }

  #incrementButton {
    font-size: 77%;
    width: 15%;
    height: 19%;
    top: 16%;
    left: 83%;
    border: 1px solid rgba(44, 43, 43, 0.224);
  }

  #show {
    width: 0%;
  }

  #buttons {
    position: absolute;
    top: 68%;
    left: 1.3%;
    width: 96%;
    height: 32%;
    display: grid;
    grid-column-gap: 19.5%;
    grid-row-gap: 1%;
    grid-template-columns: repeat(4, 29px);
  }

  .imagehand1 {
    position: absolute;
    width: 120%;
  }

  .Dimagehand1 {
    position: absolute;
    width: 90%;
  }

  #insuranceDiv {
    width: 89%;
    height: 82%;
  }
}

@media (max-width: 400px) {
  #money {
    width: 97%;
  }

  #conves {
    width: 97%;
  }

  #box {
    width: 97%;
  }
}