.playPage {
  margin: 0;
  height: 100vh; /* Takes up the full screen height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the whole group vertically */
  align-items: center;     /* Centers the whole group horizontally */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('jujutsu\ kaisen.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Roboto', sans-serif;
  gap: 40px;
  text-align: center; /* Ensures text stays centered within the divs */
  background-size: cover;
  background-position: center;
}

.title {
  align-content: center;
  color: white;
  font-size: 450%;
  letter-spacing: 20px; /* Adjust this number to your liking */
  text-transform: uppercase; /* Optional: JJK titles often look cool in all caps */
}

.info {
  color: white;
  font-size: 90%;
  align-content: center;
}

.firstPage h1 {
  font-weight: 100;
  margin-top: 50px; /* Adjust this number to move it down exactly where you want it */
}

.playButton img{
  width: 300px;
  height: auto; /* Keeps the image from looking squashed */
  align-self: auto;
  border: 2px solid white;
  transition: all 0.3s ease; /* Makes the zoom and glow smooth */
}

.playButton img:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* Brightens when you hover */
  transform: scale(1.02); /* Slight zoom */
}

.left img:hover {
  color: white;
  transform: translateY(-50%) scale(1.2); /* Expand on hover */
}

.left img {
  width: 50px;
  height: auto;
  position: fixed;
  left: 50px; /* Anchors it to the LEFT wall */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid white;
  background: none;
}

.right img {
  width: 50px;
  height: auto;
  position: fixed;
  right: 50px; /* Anchors it to the RIGHT wall */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid white;
  background: none;
}

.right img:hover {
  color: white;
  transform: translateY(-50%) scale(1.2); /* Expand on hover */
}


.CharacterPage {
  margin: 0;
  height: 100vh; /* Takes up the full screen height */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('Chars.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Roboto', sans-serif;
  gap: 40px;
  background-size: cover;
  background-position: center;
}

#char-img {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 400px;
  height: auto;
  transform: translate(-50%, -50%); /* Perfectly centered */
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out, transform 0.3s ease;
}

#char-img:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* Brightens when you hover */
}

.charName {
  position: absolute;
  text-align: center;
  color: white;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  font-size: 450%;
  width: 100%;
}

/* This class will be added/removed by JavaScript */
.fade-out {
  opacity: 0 !important;
}

#char-Image {
  position: absolute;
  left: 20%; 
  top: 40%;
  width: 400px;
  transform: translateY(-50%);
  box-shadow: 0 0 10px white;
  cursor: pointer;
  transition: 0.3s ease;
  background: none;
  opacity: 1;
  transition: opacity 0.2s ease-in-out, transform 0.3s ease; /* Added opacity transition */
}

/* 1. THE MAIN STATS BOX: Now wraps snugly around content */
.stats {
  position: fixed;
  left: 750px;            /* Position to the left of your name/buttons */
  top: 50%;               /* Centers the entire box vertically */
  transform: translateY(-50%); 
  
  display: flex;
  flex-direction: column; /* Stacks everything vertically */
  align-items: center;    /* Centers Name, Level, and Powers horizontally */
  justify-content: center; /* Centers items vertically within the box */
  
  /* Reduced margins: padding now controls the inner space */
  padding: 20px 40px;     
  border: 1px solid white;
  box-shadow: 0 0 10px white;
  background-color: rgba(0, 0, 0, 0.4);
  
  min-width: 450px;       /* Ensures enough width for the timers */
  z-index: 1;
}

/* 2. THE POWERS CONTAINER: Centers the button rows */
.powers {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centers each power-container horizontally */
  gap: 15px;
  width: 100%;            /* Fills the box width for proper centering */
  margin-top: 20px;       /* Space between Level text and first button */
}

/* 3. INDIVIDUAL BUTTON ROW: Ensures text and timers stay side-by-side */
.power-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the button+timer group */
  width: 100%;
}


/* --- NAME AND LEVEL (Your exact positions) --- */
#char-Name {
  left: 900px;  
  position: fixed;
  top: 10%;
  color: white;
  border: 1px solid white;
  padding: 10px 50px;
  box-shadow: 0 0 10px white;
  font-size: 300%;
  z-index: 10;
}

#Level {
  left: 975px;  
  position: fixed;
  top: 23%;
  color: white;
  text-shadow: 0 0 10px #ffffff;
  font-size: 450%;
  z-index: 10;
}

#Lev {
  left: 970px;
  position: fixed;
  top: 39%;
  color: white;
  text-shadow: 0 0 10px #ffffff;
  font-size: 130%;
  z-index: 10;
}

.power-container button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border: 4px solid #ffffff;
  padding: 12px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  min-width: 250px; /* Uniform width */
  transform: skewX(-10deg);
  transition: 0.2s;
  box-shadow: 4px 4px 0px rgb(0, 0, 0); 
}

.power-container button:hover {
  background-color: #ffffff;
  color: black;
  transform: skewX(-10deg) scale(1.05);
}

.timer-val {
  margin-left: 20px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px #ffffff;
  border-bottom: 2px solid white;
  min-width: 80px;
}

/* --- PAGE STYLING --- */
.StatsPage {
  margin: 0;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('Chars.jpeg');
  background-size: cover;
  background-position: center;
}

#char-Image {
  position: absolute;
  left: 150px;
  top: 40%;
  width: 400px;
  transform: translateY(-50%);
  box-shadow: 0 0 10px white;
}

#char-Name, #Level, #Lev {
  position: static; /* Let them follow the Flexbox flow inside .stats */
  margin: 10px 0;
  text-align: center;
}

.Grades {
  margin: 0;
  height: 100vh; /* Takes up the full screen height */
  background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5)), url('GETO.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Roboto', sans-serif;
  background-size: cover;
  background-position: center;
}

/* Added a small margin to individual buttons for extra safety */
.GradeLevels button {
  margin: 5px 0;          
  /* Your existing button styles... */
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border: 4px solid #ffffff;
  padding: 12px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  min-width: 250px; 
  transform: skewX(-10deg);
  transition: 0.2s;
  box-shadow: 4px 4px 0px rgb(0, 0, 0); 
}

.GradeLevels button:hover {
  background-color: #ffffff;
  color: black;
  transform: skewX(-10deg) scale(1.05);
}

/* 1. This centers the ENTIRE group (Title + Box) */
.tot {
  position: fixed;
  left: 50%;
  top: 50%;               
  transform: translate(-50%, -50%); /* Perfectly centers the whole group */

  display: flex;
  flex-direction: column; 
  align-items: center;    /* Keeps title and box aligned in the middle */
  gap: 20px;              /* Space between the Title and the Box */
}

/* 2. Style the Title */
.SelectTitle {
  color: white;
  text-shadow: 0 0 15px #ffffff;
  font-size: 350%;
  margin: 0;              /* Remove default margins to keep spacing tight */
  text-transform: uppercase;
  letter-spacing: 5px;
}

/* 3. The Box (Remove the fixed positioning here so it follows the Title) */
.GradeLevels {
  position: static;       /* Change from fixed to static */
  transform: none;        /* Remove the translate since .tot handles it */
  
  display: flex;
  flex-direction: column; 
  align-items: center;    
  justify-content: center; 
  
  padding: 60px 50px;
  gap: 30px;
  
  border: 1px solid white;
  box-shadow: 0 0 10px white;
  background-color: rgba(0, 0, 0, 0.4);
  min-width: 450px;       
}

.progression-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 15px;
  color: white;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
}
/* When locked, the image dims */
#stats-link {
  transition: opacity 0.3s ease;
}

.lock-screen {
  position: absolute;
  left: 50%;           /* Centered relative to the character image container */
  top: 60%;
  transform: translate(-50%, -50%); /* Keeps it perfectly centered */
  width: 400px;
  height: 350px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.buy-btn {
  background: white;
  color: black;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  text-transform: uppercase;
}

.target-info-box {
  position: absolute;
  left: 20%;           /* Matches the responsive left position of your #char-Image */
  top: 70%;
  width: 400px;
  transform: translateX(-50%); /* Aligns center-line with the image center */
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #ffcc00;
  color: white;
  padding: 15px;
  font-family: 'Courier New', monospace;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}

.target-info-box h3 { color: #ffcc00; margin-top: 0; }
.target-info-box p { font-size: 1.2rem; margin: 5px 0; }
#session-timer { font-size: 2rem; color: #ff0000; font-weight: bold; }

.start-battle-btn {
  background-color: #ffcc00;
  color: #000;
  border: 4px solid #fff;
  padding: 15px 40px;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  transform: skewX(-15deg);
  transition: 0.3s;
  box-shadow: 6px 6px 0px #fff;
  
  position: fixed;
  left: 75%;           /* Places it on the right side of the screen */
  top: 3%;         /* Anchors to bottom instead of top for responsiveness */
  transform: translateX(-50%) skewX(-15deg);
}

.goBack img{
  width: 50px;
  height: auto;
  position: fixed;
  left: 30px;
  top: 30px;           /* Standardized offset from corner */
  z-index: 100;
  cursor: pointer;
  transition: 0.3s ease;
}

.goBack img:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* Brightens when you hover */
  transform: scale(1.02); /* Slight zoom */
}

.start-battle-btn:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 20px #180415;
  transform: skewX(-15deg) scale(1.1);
}

.PreBattle {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Centers the 10min timer and bar automatically */
  color: white;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('PreBat.jpeg');
  background-size: cover;
  background-position: center;
  text-align: center;
  gap: 20px;
}

.battle-container { text-align: center; width: 80%; }

.progress-container {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  margin: 30px 0;
  position: relative;
  overflow: hidden;
  transform: skewX(-10deg);
}

.progress-bar {
  width: 0%; /* Starts empty */
  height: 100%;
  background: linear-gradient(90deg, #ffcc00, #ffeb3b);
  box-shadow: 0 0 20px #ffcc00;
  transition: width 1s linear; /* Smooth fill */
}

#countdown-timer {
  font-size: 5rem;
  font-weight: 900;
  text-shadow: 0 0 15px #ffcc00;
}

.StudyBattlePage {
  margin: 0;
  height: 100vh;
  width: 100vw;
  color: white;
  font-family: 'Roboto', sans-serif;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('FinalPlace.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* Removed display: flex from here so it doesn't break the layout */
}

/* 1. Energy Bar - Fixed to the very top */
/* This is the background "track" of the bar */
/* This is the fixed "Frame" that stays in the center */
.energy-container {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;         /* Total width of the bar */
  height: 15px; 
  background: rgba(255, 255, 255, 0.1); /* The "Empty" part of the bar */
  border: 1px solid white;
  z-index: 100;
  overflow: hidden;    /* Important: clips the bar inside */
}

/* This is the actual Green Energy */
.full-energy-bar {
  position: absolute;
  left: 0;             /* PINS IT TO THE LEFT SIDE OF THE CONTAINER */
  top: 0;
  width: 100%;         /* Starts at full */
  height: 100%;
  background: #4ecca3;
  box-shadow: 0 0 15px #4ecca3;
  transition: width 0.5s ease; /* Smoothly slides from right to left */
}



/* 2. Boss Area - Centered perfectly in the screen */
.boss-area {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

/* 3. Attack List - Stays on the left side */
.attack-list {
  position: fixed;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  min-width: 250px;
  transform: skewX(-10deg);
  transition: 0.2s;
  box-shadow: 4px 4px 0px rgb(0, 0, 0);
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.hp-wrapper {
  width: 600px; 
  height: 30px; 
  background: #16213e;
  border: 2px solid #4ecca3; 
  margin: 20px auto; 
  border-radius: 5px;
  overflow: hidden;
}

#final-timer {
  font-size: 6rem; /* Made larger for focus */
  color: #4ecca3;
  font-weight: 900;
  margin-bottom: -10px;
}

#distracted-btn {
  position: fixed;
  top: 70px;           /* Sits clearly below the energy bar */
  left: 50%;
  transform: translateX(-50%);
  background-color: #e94560;
  color: white;
  border: 2px solid white;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 200;
  text-transform: uppercase;
  transition: 0.3s;
}

#distracted-btn:hover {
  background-color: white;
  color: #e94560;
}

.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #16213e;
  border: 2px solid #4ecca3;
  padding: 40px;
  text-align: center;
  min-width: 300px;
  box-shadow: 0 0 30px rgba(78, 204, 163, 0.3);
}

#result-title { font-size: 3rem; margin-bottom: 10px; color: #4ecca3; }
#result-message { font-size: 1.2rem; margin-bottom: 20px; }
#result-rewards { color: #ffcc00; font-weight: bold; margin-bottom: 20px; }

.modal-btn {
  background: #4ecca3;
  color: #1a1a2e;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
}