body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #111;
  color: white;
}

#name-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("images/name-panel-bg.jpg.jpg") no-repeat center center;
  background-size: cover;
  background-color: black;
  text-align: center;
  font-family: "Jersey 20", sans-serif;
}

#nameInput {
  font-size: 16px;
  padding: 5px;
  border-radius: 6px;
  margin: 10px 0;
  text-align: center;
}

#dice-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: #0e0e0e;
  text-align: center;
}

#playerCard {
  width: 50vw;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

#dice-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#rollDiceBtn {
  background: linear-gradient(135deg, #0080ff, #db0000);
  color: white;
  font-size: 1.1rem;
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#rollDiceBtn:hover {
  transform: scale(1.05);
}

.plus-btn {
  margin-left: 4px;
  padding: 1px 4px;
  font-size: 8px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.plus-btn:hover {
  background-color: #2980b9;
}

#toggleStatBtn {
  font-size: 10px;
  padding: 5px 10px;
  background-color: #000000;
  box-shadow: 0 0px 5px rgb(255, 255, 255);
}

#toggleStatBtn:active {
  background-color: rgb(255, 255, 255);
  color: #000000;
  transition: 1ms;
}

#game-panel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #0e0e0e;
  box-sizing: border-box;
}

#game-panel h2,
#game-panel #title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.container {
  display: flex;
  flex-direction: row;
  width: 110%;
}

.game {
  min-width: 250px;
  flex: 1;
  padding: 20px;
  background: #1a1a1a;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.stats {
  flex: 1;
  padding: 20px;
  background: #1b1b1b;
  border-left: 3px solid #333;
  box-shadow: -1px 1px 4px white;
  min-width: 200px;
}

.stat-block {
  margin-bottom: 10px;
}

.stat-label {
  display: flex;
  justify-content: space-between;
}

.stat-bar {
  background: #444;
  border-radius: 8px;
  height: 10px;
  margin-top: 4px;
  overflow: hidden;
}

.stat-fill {
  background: limegreen;
  height: 15px;
  width: 0%;
  transition: width 0.3s ease;
}

button {
  padding: 10px 20px;
  background: #444;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 5px;
  font-size: 16px;
}

#name-panel button {
  font-size: 18px;
  border-radius: 8px;
}

button:hover {
  background: #666;
}

.player-card {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

#story-panel {
  background-color: #111;
  text-align: center;
}

#story-text {
  white-space: pre-line;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 20px auto;
  font-size: 1.2rem;
}

#story-title {
  text-align: center;
  background: #111;
  padding: 10px;
}

#story-panel button {
  margin-top: 20px;
}

.choice-area {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  display: flex;
  margin-top: 20px;
  flex-direction: row;
}

.choice-area button,
.choice-button {
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: #3498db;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.choice-area button:hover,
.choice-button:hover {
  background: #2980b9;
}

.card {
  background: linear-gradient(to bottom right, #1f2a38, #2c3e50);
  border: 4px solid #5eaaff;
  border-radius: 20px;
  width: 200px;
  padding: 20px;
  color: white;
  text-align: center;
  margin: 0px;
  display: inline-block;
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

.card .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
  padding-bottom: 10px;
}

.card .subtitle {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

.card .description {
  font-size: 14px;
  margin: 15px 0;
}

.card .rank {
  font-size: 14px;
  color: #89cfff;
  font-weight: bold;
}

#intro-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  filter: blur(4px) brightness(0.7);
}

.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-line {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

@media (max-width: 480px) {
  #choices button {
    font-size: 0.95rem;
    padding: 10px 20px;
  }
}

#main-menu button {
  font-size: 28px;
  padding: 20px 40px;
  background: #ffffff10;
  color: white;
  border: 2px solid white;
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin: 10px;
}

#main-menu button:hover {
  background: #ffffff20;
  transform: scale(1.05);
}

/* --- Reward Panel --- */
#reward-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#reward-content {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 15px;
  border: 2px solid #f9e107;
  box-shadow: 0 0 30px rgba(255, 242, 0, 0.629);
}

#reward-card-display {
  margin-top: 20px;
  cursor: default;
  /* Not clickable */
}

#reward-card-display:hover {
  transform: none;
  /* No hover effect */
}


/* --- Styles for Integrated Battle Panel --- */
#battle-panel {
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  background-color: #000;
}

#battle-panel #orientation-prompt {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
}

#battle-panel .game-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Add this new rule to the end of your style.css */

.player-hud-bars {
  width: 100%;
  position: relative;
  
}

#battle-panel .character {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 21%;
  max-width: 97%;
}

#battle-panel .player {
  bottom: 41%;
  left: 10%;
}

#battle-panel .opponent {
  top: 2%;
  right: 10%;
}

#battle-panel .player-img {
  width: 39%;
  height: auto;
}

#battle-panel .opponent-img {
  width: 50%;
  height: auto;
}

#battle-panel .health-bar {
  width: 100%;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  border-radius: 5px;
  margin: 8px 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#battle-panel .health-bar .name {
  color: white;
  font-size: 12px;
  text-align: center;
  margin-bottom: 2px;
  text-shadow: 1px 1px 2px black;
}

#battle-panel .health-fill {
  height: 100%;
  background-color: #32ff7e;
  border-radius: 3px;
  transition: width 0.5s ease-in-out;
}


/* --- BATTLE STAMINA BAR STYLES --- */

.stamina-bar {
  width: 100%;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 0px solid #fff;
  border-radius: 5px;
  margin-top: 10%;
  margin-left: -8.9%;
  position: relative; /* Needed for the text overlay */
}

.stamina-fill {
  height: 100%;
  background-color: #3498db; /* Blue color for stamina */
  border-radius: 3px;
  transition: width 0.5s ease-in-out;
}

.stamina-text {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black;
  line-height: 15px; /* Vertically centers the text */
  
}

#battle-panel .action-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
  border-top: 2px solid #fff;
  padding: 10px;
  color: white;
}

#battle-panel .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

#battle-panel .buttons button {
  padding: 8px 12px;
  font-size: 14px;
  flex-grow: 1;
  border: 2px solid #fff;
  background-color: #333;
  color: white;
  border-radius: 5px;
}

#battle-panel .buttons button:disabled {
  background-color: #555;
  color: #aaa;
  cursor: not-allowed;
  border-color: #777;
}

#battle-panel .log {
  margin-top: 10px;
  height: 60px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid #555;
}

#battle-panel .card-container {
  display: none;
  /* Keep this */
  position: absolute;
  /* Keep this */
  bottom: 100%;
  /* Keep this */
  left: 50%;
  /* Keep this */
  transform: translateX(-50%);
  /* Keep this */
  width: 90%;
  /* Keep this */
  background: #222;
  /* Keep this */
  border: 2px solid #fff;
  /* Keep this */
  border-bottom: none;
  /* Keep this */
  border-radius: 10px 10px 0 0;
  /* Keep this */
  padding: 10px;
  /* Keep this */
  margin-bottom: -2px;
  /* Keep this */

  /* --- ADD THESE NEW LINES --- */
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap to the next line */
  justify-content: center;
  /* Centers the buttons */
  gap: 5px;
  /* Adds a small space between buttons */
}

#battle-panel .card-container button {
  flex: 1 1 48%;
  /* This creates a flexible two-column layout */
  margin-bottom: 5px;
  /* Keep this */
  margin-right: 9px;
  padding: 8px;
  /* Keep this */
  font-size: 14px;
  /* Keep this */
  background-color: #555;
  /* Keep this */
  color: white;
  /* Keep this */
  border: 1px solid #888;
  /* Keep this */
}

#battle-panel .card-container button:disabled {
  background-color: #444;
  color: #888;
  cursor: not-allowed;
  border-color: #666;
}

#battle-panel .shake {
  animation: shake 0.4s ease-in-out;
}

#battle-panel .attack-lunge-player {
  animation: attack-lunge-player 0.4s ease;
}

#battle-panel .attack-lunge-opponent {
  animation: attack-lunge-opponent 0.4s ease;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-8px) rotate(-2deg);
  }

  75% {
    transform: translateX(8px) rotate(2deg);
  }
}

@keyframes attack-lunge-player {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(20px, -20px) scale(1.1);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes attack-lunge-opponent {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-20px, 20px) scale(1.1);
  }

  100% {
    transform: translate(0, 0);
  }
}

#battle-panel .opponent-img.damaged {
  filter: grayscale(70%);
}

#battle-panel .opponent-img.critical {
  filter: drop-shadow(0 0 1px red) drop-shadow(0 0 1px red) drop-shadow(0 0 1px red);
}

#battle-panel .attack-gif-container {
  position: absolute;
  z-index: 5;
  display: none;
  pointer-events: none;
}

#battle-panel .attack-gif {
  width: 150px;
  height: auto;
  object-fit: contain;
}

#player-gif-container {
  bottom: 43%;
  left: 10%;
  transform: translate(0, 0);
}

#opponent-gif-container {
  top: 10%;
  right: 14%;
  transform: translate(0, 0);
}

#middle-gif-container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#battle-panel .opponent-base {
  width: 150px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  bottom: -10px;
  z-index: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* ## RACE PANEL STYLES ## */
#race-panel {
  padding: 0;
  overflow: hidden;
  background: #000;
}

#raceCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #2c3e50;
}

#race-orientation-prompt{
  padding: 3px;
  margin: -10px;
  font-size: 13px;
}

/* ## TRAINING PANEL STYLES ## */
#training-panel {
  background-color: #000;
  z-index: 200;
  /* Ensure it's on top of other panels */
}

#training-gif {
  width: 80%;
  max-width: 400px;
  border-radius: 15px;
}

/* --- Stat Rank Styling --- */
.stat-label span,
#statReveal span {
  font-weight: bold;
  transition: all 0.3s ease;
}

/* TIER 1: F to SSS (Color only) */
.rank-color-f {
  color: #ffffff;
}

.rank-color-e {
  color: #b5cae0;
}

.rank-color-d {
  color: #2E8B57;
}

.rank-color-c {
  color: #4682B4;
}

.rank-color-b {
  color: #DAA520;
}

.rank-color-a {
  color: #CD5C5C;
}

.rank-color-s {
  color: #FF6347;
}

.rank-color-ss {
  color: #FF4500;
}

.rank-color-sss {
  color: #FF0000;
}

/* TIER 2: SR to SSR (Faint Silver Glow) */
.rank-glow-tier-2 {
  color: #DAA520;
  text-shadow: 0 0 5px rgb(255, 136, 0);
}

/* TIER 3: UR to MR (Silver Glow) */
.rank-glow-tier-3 {
  color: #F5F5F5;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 10px rgba(192, 192, 192, 0.6);
}

/* TIER 4: X to XXX (Faint Dark Red Glow) */
.rank-glow-tier-4 {
  color: #B22222;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}

/* TIER 5: EX to DX (Dark Red Glow) */
.rank-glow-tier-5 {
  color: #DC143C;
  text-shadow: 0 0 9px rgba(255, 0, 0, 0.7), 0 0 12px rgba(200, 0, 0, 0.5);
}

/* TIER 6: UNMEASURABLE (Special Glow) */
.rank-glow-tier-6 {
  color: #FF4500;
  text-shadow:
    -1px -1px 2px #8B0000,
    1px -1px 2px #8B0000,
    -1px 1px 2px #8B0000,
    1px 1px 2px #8B0000,
    0 0 12px rgba(255, 20, 20, 0.9),
    0 0 15px rgba(200, 0, 0, 0.8);
}

/*//////////////////////*/
#battle-panel .stun-gif {
  position: absolute;
  width: 350px;
  height: auto;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
}

#player-stun-gif {
  bottom: 43%;
  left: 1%;
}

#opponent-stun-gif {
  top: 5vh;
  right: 15vw;
}

/* Add a smooth transition for the glow effect */
#battle-panel .player-img,
#battle-panel .opponent-img {
  transition: filter 0.5s ease-in-out;
}

/* Define the glow styles for different colors */
.glow-green {
  filter: drop-shadow(0 0 8px #0da74d) drop-shadow(0 0 12px #ff990a);
}

.glow-red {
  filter: drop-shadow(0 0 8px #ff3e3e) drop-shadow(0 0 12px #f9ff59);
  transition: filter 0.3s ease-in-out; /* Optional: for a smoother transition */

}

.glow-blue {
  filter: drop-shadow(0 0 8px #4cabff) drop-shadow(0 0 12px #8777ff);
}

.glow-pink {
  filter: drop-shadow(0 0 8px #fbabff) drop-shadow(0 0 12px #2980b9);
}

.glow-black {
  filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 12px #000000);
}
/* --- ADD THESE MISSING GLOW EFFECTS --- */

.glow-brown {
  filter: drop-shadow(0 0 8px #8B4513) drop-shadow(0 0 12px #FFA500);
}

.glow-yellow {
  filter: drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 12px #FFFFE0);
}

.glow-purple {
  filter: drop-shadow(0 0 8px #8A2BE2) drop-shadow(0 0 12px #E0B0FF);
}

/* Add this new rule to the end of your style.css file */
.choice-button .button-sub-text {
  font-size: 0.65rem;
  /* Makes the font much smaller than the button's main text */
  font-weight: normal;
  /* Ensures the text isn't bold */
  opacity: 0.8;
  /* Makes the text slightly faded and less prominent */
}

/* Add these styles to style.css */
#loading-panel {
  background-color: #000;
  z-index: 9999; /* Ensures it's on top of everything */
  justify-content: center;
  align-items: center;
  text-align: center;
}

#progress-bar-container {
  width: 80%;
  max-width: 500px;
  height: 30px;
  background-color: #333;
  border: 2px solid #fff;
  border-radius: 15px;
  margin-top: 20px;
}

#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #3498db;
  border-radius: 12px;
  transition: width 0.3s ease-in-out;
}

#progress-text {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: bold;
}

/* --- End Video Panel Styles --- */
#video-panel {
  position: fixed; /* Ensures it covers the entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2000; /* High z-index to appear on top of everything */
}

#endVideo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the whole video is visible */
}
/* --- Custom Opponent Image Sizes --- */

/* Make Jeong-u Song's image smaller */
#battle-panel .opponent-img.Jeong_u_Song {
  width: 35%;
}
#battle-panel .opponent-img.L_Thug3 {
  width: 35%;
}
#battle-panel .opponent-img.L_Thug2 {
  width: 52%;
}
#battle-panel .opponent-img.L_Thug1 {
  width: 34%;
}
#battle-panel .opponent-img.Jingu_Oh {
  width: 38%;
}
#battle-panel .opponent-img.Hakjin_Ju {
  width: 38%;
}
#battle-panel .opponent-img.Don_gu_Wang {
  width: 36%;
}
#battle-panel .opponent-img.Daniel_MC {
  width: 47%;
}
#battle-panel .opponent-img.Jikwang_Hong {
  width: 38%;
}
#battle-panel .opponent-img.Jeongdu_Ma {
  width: 37%;
}
#battle-panel .opponent-img.Seok_Kang {
  width: 40%;
}
#battle-panel .opponent-img.Suheyon_kim {
  width: 37%;
}
#battle-panel .opponent-img.Choyun {
  width: 37%;
}
#battle-panel .opponent-img.NPC1 {
  width: 65%;
}
#battle-panel .opponent-img.NPC2 {
  width: 65%;
}
#battle-panel .opponent-img.NPC3 {
  width: 63%;
}
#battle-panel .opponent-img.Uijin_Gyeong {
  width: 58%;
}
#battle-panel .opponent-img.old_thug {
  width: 55%;
}
#battle-panel .opponent-img.Changung_Yeom {
  width: 41%;
}
#battle-panel .opponent-img.Han_Jaeha {
  width: 54%;
}

#battle-panel .opponent-img.Suheyon_kim.damaged {
  width: 66%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Suheyon_kim.critical {
  width: 66%;
}
#battle-panel .opponent-img.Uijin_Gyeong.damaged {
  width: 30%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Uijin_Gyeong.critical {
  width: 30%;
}
#battle-panel .opponent-img.Sechan_Kang.damaged {
  width: 58%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Sechan_Kang.critical {
  width: 58%;
}
#battle-panel .opponent-img.Choyun.damaged {
  width: 52%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Choyun.critical {
  width: 52%;
}
#battle-panel .opponent-img.Hyeokjae_Bae.damaged {
  width: 63%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Hyeokjae_Bae.critical {
  width: 63%;
}
#battle-panel .opponent-img.Dongtak_Seo.damaged {
  width: 29%;
  filter: brightness(0.8); /* Also make it a bit darker */
}
#battle-panel .opponent-img.Dongtak_Seo.critical {
  width: 29%;
}
/* Make the old thug's image a bit smaller than the default */


/* Make Hyeokjae Bae's image larger */
#battle-panel .opponent-img.Hyeokjae_Bae {
  width: 58%;
}

/* The default size for any opponent without a custom rule */
#battle-panel .opponent-img {
  width: 50%;
  height: auto;
}

/* === CHECKPOINT MENU STYLES === */

#checkpointBtn {
  margin-top: 20px;
  background-color: #555;
  border: 1px solid #888;
  width: 100%;
}

#checkpoint-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-panel {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 15px;
  border: 2px solid #3498db;
  box-shadow: 0 0 30px rgba(52, 152, 219, 0.5);
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.popup-panel h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: #3498db;
}

.popup-panel button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

#save-slots-container,
#load-slots-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.slot-button {
  padding: 15px;
  background-color: #333;
  border: 1px solid #555;
  text-align: left;
}

.slot-button.empty {
  color: #888;
}

.slot-button .slot-time {
  float: right;
  font-size: 0.8rem;
  color: #aaa;
}

.popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: white;
  padding: 16px 24px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.3s ease;
}

.popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-10px);
}

#confirm-dialog {
  position: fixed; /* This is the key property that was missing */
  top: 50%;
  left: 50%; /* Added to complete the centering logic */
  transform: translate(-50%, -50%);
  background: #111;
  padding: 30px;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border: 2px solid white;
  z-index: 9999; /* Ensures it appears on top of other content */
  border-radius: 15px; /* Optional: adds rounded corners */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Optional: adds a subtle shadow */
}

.confirm-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.confirm-buttons button {
  padding: 10px 20px;
  background: #444;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.confirm-buttons button:hover {
  background: #666;
}
/* --- SHOP STYLES --- */

#player-gold-display, #shop-gold-display {
  font-size: 1.2rem;
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 10px;
  text-shadow: 0 0 5px black;
}

#shopBtn {
  width: 100%;
  background-color: #DAA520;
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}

#shop-panel {
  background-color: #5d4a41; /* A fallback color from your image */
  justify-content: flex-start;
  padding: 20px; /* Adjust padding as needed */

  /* --- Border Image Properties --- */
  border: 30px solid transparent; /* Sets the width of the border */
  border-image-source: url('cha/bg.png'); /* The path to your image */
  border-image-slice: 40; /* Slices 40px from each edge of the image */
  border-image-repeat: stretch; /* Stretches the slices to fit the border */
}

.pack-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.pack-card {
  border-radius: 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  border: 3px solid;
  transition: transform 0.2s;
}

.pack-card:hover {
  transform: scale(1.05);
}

.pack-card h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

.pack-card .pack-cost {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 10px 0 20px;
  color:#fff5bc;
  text-shadow: 
    /* 1st Layer: Dark outline right below the main text */
    1px 1px 0 #3d3535,
     1px 1px 0 #3d3535,
  

    /* 2nd Layer: The main 3D shadow (dark brown) */
    1px 1px 0 #3d3535;
}

.pack-card button {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 20px;
}
.pixel-gamer-text {
  font-family: 'Pixel Gamer'; /* Apply the font */
  font-size: 100px; /* Adjust size as needed */
  color: #f0f0e0; /* This is the light beige main text color */
  text-align: center;
  margin: 0px;
  
  /* --- 3D Effect using multiple text-shadows --- */
  text-shadow: 
    /* 1st Layer: Dark outline right below the main text */
    -3px 3px 0 #3d3535,
     3px 3px 0 #3d3535,
     3px -3px 0 #3d3535,
    -3px -3px 0 #3d3535,

    /* 2nd Layer: The main 3D shadow (dark brown) */
    10px 10px 0 #3d3535;
}
.bronze {
  background: linear-gradient(135deg, #cd7f32, #8c581c);
  border-color: #e6a861;
}

.silver {
  background: linear-gradient(135deg, #c0c0c0, #8f8f8f);
  border-color: #e0e0e0;
}

.diamond {
  background: linear-gradient(135deg, #b9f2ff, #6ad5ff);
  border-color: #d6faff;
}

#returnToGameBtn {
  margin-top: 30px;
  background-color: #ff0000;
  font-family:'pixel gamer';
  font-weight: lighter;
}
#returnToGameBtn:hover{
  background-color: #4da6ff;
}

#pack-reward-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 4000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- CARD REVEAL ANIMATION STYLES --- */

/* MERGED AND CORRECTED RULE FOR THE POPUP CONTENT */
#pack-reward-content {
  /* Visual Styles */
  background: #111;
  padding: 20px;
  border-radius: 15px;
  border: 2px solid #FFD700;
  text-align: center;
  
  /* Positioning & Animation */
  position: relative;
  perspective: 1000px; 
  
  /* Flexbox Layout (Fixes the stuck button) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Sizing */
  width: auto;
  min-width: 280px; 
  height: auto;
}

/* The rest of your animation styles for card-display, flipper, etc. remain the same */

/* REPLACE your other #pack-reward-card-display rule with this */
#pack-reward-card-display {
  width: 250px; /* Give the card a fixed width */
  margin: 20px 0; /* Add some space around the card */
  opacity: 0; /* Starts hidden for the animation */
  animation: fadeInReveal 0.3s 1.2s forwards; /* Fades in after the flip */
}

/* The animated card back that flips */
.card-reveal-flipper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: reveal 1s forwards;
}

.card-reveal-flipper.animate {
    animation: flip 1s 1s forwards; /* Flip animation starts after 1s */
}

.card-reveal-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #333, #111);
  border-radius: 20px;
  border: 4px solid #555;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  color: #666;
  text-shadow: 0 0 10px #000;
  box-shadow: 0 0 var(--glow-intensity, 10px) var(--glow-color-1, #fff);
  animation: pulse 1.5s infinite;
}
.card-reveal-back::before {
  content: '?';
}


/* Rarity Specific Colors & Glows */
.rarity-uncommon .card-reveal-back {
  --glow-color-1: #27ae60;
  --glow-intensity: 10px; /* Dim */
  border-color: #2ecc71;
}

.rarity-rare .card-reveal-back {
  --glow-color-1: #2980b9;
  --glow-intensity: 15px; /* Brighter */
  border-color: #3498db;
}

.rarity-epic .card-reveal-back {
  --glow-color-1: #8e44ad;
  --glow-intensity: 25px; /* More Brighter */
  border-color: #9b59b6;
}

.rarity-legendary .card-reveal-back {
  --glow-color-1: #f39c12;
  --glow-intensity: 40px; /* Brightest */
  border-color: #f1c40f;
  animation: pulse-legendary 1s infinite;
}

/* Keyframe Animations */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 var(--glow-intensity, 10px) var(--glow-color-1, #fff); }
  50% { box-shadow: 0 0 calc(var(--glow-intensity, 10px) * 1.5) var(--glow-color-1, #fff); }
}

@keyframes pulse-legendary {
  0%, 100% { box-shadow: 0 0 40px #f39c12, 0 0 60px #e67e22 inset; }
  50% { box-shadow: 0 0 60px #f39c12, 0 0 80px #e67e22 inset; }
}

@keyframes flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

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

@font-face {
  font-family: 'Pixel Gamer'; /* You can name it whatever you want */
  src: url('cha/pixelgamerpersonaluse-rg61l.otf') format('opentype');
}

/* === NEW MULTIPLAYER UI STYLES === */

#multiplayer-panel {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multiplayer-container {
  background-color: rgba(10, 20, 30, 0.85);
  border: 2px solid #00aaff;
  border-radius: 15px;
  padding: 30px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 0 25px rgba(0, 170, 255, 0.5);
  backdrop-filter: blur(5px);
  text-align: center;
}

.multiplayer-container h2 {
  font-family: "Jersey 20", sans-serif;
  font-size: 3rem;
  color: #ffffff;
  text-shadow: 0 0 10px #00aaff;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.lobby-status {
  margin-bottom: 30px;
  font-size: 1.1rem;
  color: #cccccc;
}

#playerCount {
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.server-grid button {
  padding: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: rgba(0, 170, 255, 0.1);
  color: #ffffff;
  border: 2px solid #00aaff;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

.server-grid button:hover {
  background-color: rgba(0, 170, 255, 0.3);
  box-shadow: 0 0 15px #00aaff;
  transform: translateY(-3px);
}

#leave-server-btn {
  width: 50%;
  max-width: 300px;
  padding: 15px;
  font-size: 1.1rem;
  background-color: rgba(255, 50, 50, 0.2);
  border: 2px solid #ff3232;
  color: #ffffff;
  border-radius: 8px;
  transition: background-color 0.3s, box-shadow 0.3s;
}

#leave-server-btn:hover {
  background-color: rgba(255, 50, 50, 0.4);
  box-shadow: 0 0 15px #ff3232;
}
/* New rule for PvP opponent size */
#battle-panel .opponent-img.pvp-opponent {
width: 35%;
}
#main-menu button:disabled {
  background: #333333a0;
  color: #888;
  border-color: #555;
  cursor: not-allowed;
}
/* === CARD SHREDDER STYLES === */

#shredder-panel {
  justify-content: flex-start;
  padding-top: 50px;
}

#shredder-card-list {
  width: 90%;
  max-width: 600px;
  height: 60vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #555;
  border-radius: 10px;
  padding: 15px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shredder-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2c3e50;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #34495e;
}

.shredder-card-item .card-name {
  font-weight: bold;
}

.shredder-card-item .shred-button {
  background-color: #e74c3c;
  color: white;
  padding: 5px 10px;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.shredder-card-item .shred-button:hover {
  background-color: #c0392b;
}
/* --- CARD SHREDDER ANIMATION --- */

.shredder-card-item.shredding {
  animation: shred-effect 0.6s forwards ease-in-out;
}

@keyframes shred-effect {
  0% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
  25% {
    transform: translate(-15px, 0) rotate(-3deg);
  }
  50% {
    transform: translate(15px, 0) rotate(3deg);
  }
  100% {
    transform: scale(0.2) translateX(300px);
    opacity: 0;
  }
}