@font-face {
  font-family: 'ssf4_abuketregular';
  src: url('./fonts/ssf4_abuket-webfont.woff2') format('woff2'), url('./fonts/ssf4_abuket-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: auto;
  padding: 0;
}

.center {
  margin-top: 2%;
  width: 100%;
  color: yellow;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}

h1{
  font-size: 60px;
  animation: titleGlow 2s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
  50% {
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow;
  }
}

html {
  background: url("../images/level.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

body {
  background-color: transparent;
  font-family: ssf4_abuketregular;
}

.container {
  position: relative;
}

.card {
  /* background-color: rgba(0, 0, 0, .3); */
  background-color: transparent;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: yellow;
  padding: 10%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.card:hover {
  transform: scale(1.05) translateY(-10px);
  filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 255, 0, 0.8));
  animation: pulse 1s infinite;
}

.card-img-bottom{
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: all 0.3s ease;
}

.card-text{
  font-size: 70px;
  transition: all 0.5s ease;
}


/* ks */

 
  


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {}

/*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {}

/*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {}

/* ========== ANIMATIONS ========== */

/* Pulse animation for hover and ready states */
@keyframes pulse {
  0%, 100% {
    transform: scale(1.05) translateY(-10px);
  }
  50% {
    transform: scale(1.08) translateY(-12px);
  }
}

/* Slide in from left for player characters */
@keyframes slideInLeft {
  from {
    transform: translateX(-100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from right for opponents */
@keyframes slideInRight {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Attack lunge animation */
@keyframes attackLunge {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(50px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

/* Opponent attack lunge (opposite direction) */
@keyframes attackLungeOpponent {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(-50px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

/* Hit reaction shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Damage flash */
@keyframes damageFlash {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2) hue-rotate(0deg) drop-shadow(0 0 30px red);
  }
}

/* Victory bounce */
@keyframes victoryBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-30px) scale(1.1);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(-15px) scale(1.05);
  }
}

/* Defeat fall */
@keyframes defeat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) rotate(90deg);
    opacity: 0;
  }
}

/* Floating damage number */
@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

/* Button pulse */
@keyframes buttonPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 0, 0, 1);
    transform: scale(1.05);
  }
}

/* HP bar color transition */
@keyframes lowHPPulse {
  0%, 100% {
    color: red;
    text-shadow: 0 0 20px red;
  }
  50% {
    color: yellow;
    text-shadow: 0 0 30px yellow;
  }
}

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

/* ========== ANIMATION CLASSES ========== */

.fighter-enter {
  animation: slideInLeft 0.8s ease-out forwards;
}

.opponent-enter {
  animation: slideInRight 0.8s ease-out forwards;
}

.attacking {
  animation: attackLunge 0.5s ease-in-out;
}

.attacking-opponent {
  animation: attackLungeOpponent 0.5s ease-in-out;
}

.hit {
  animation: shake 0.5s ease-in-out, damageFlash 0.3s ease-in-out;
}

.victory {
  animation: victoryBounce 1s ease-in-out infinite;
}

.defeated {
  animation: defeat 1s ease-out forwards;
  pointer-events: none;
}

.damage-number {
  position: absolute;
  font-size: 60px;
  font-weight: bold;
  color: #ff0000;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #fff;
  animation: floatUp 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 1000;
}

.low-hp {
  animation: lowHPPulse 1s ease-in-out infinite;
}

/* Attack button styles */
#attackButton {
  transition: all 0.3s ease;
  font-size: 24px;
  padding: 20px 40px;
  border: 3px solid #fff;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

#attackButton:not(:disabled) {
  animation: buttonPulse 1.5s ease-in-out infinite;
}

#attackButton:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(255, 0, 0, 1);
}

#attackButton:active:not(:disabled) {
  transform: scale(0.95);
}

#attackButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

/* Arena fade in */
#arena {
  animation: fadeIn 0.5s ease-in;
}

/* Character card selection feedback */
.selected {
  animation: pulse 0.3s ease-in-out;
  border: 3px solid yellow;
  box-shadow: 0 0 30px rgba(255, 255, 0, 1);
}

/* Screen shake for powerful hits */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 5px); }
  20%, 40%, 60%, 80% { transform: translate(5px, -5px); }
}

.screen-shake {
  animation: screenShake 0.5s ease-in-out;
}

/* HP bar container */
.hp-container {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  margin-top: 10px;
  overflow: hidden;
}

.hp-bar {
  height: 100%;
  background: linear-gradient(to right, #00ff00, #ffff00, #ff0000);
  transition: width 0.5s ease-out;
  position: relative;
}

.hp-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
}