/* Video background */
#bgVideo {
  position: fixed;      /* stays fixed behind all content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* cover the screen fully */
  z-index: -1;          /* behind all other elements */
}

/*Harry Potter Font*/
@font-face {
    font-family: "HarryP";
    src: url("./HARRYP__.TTF") format("truetype");
}

/* Global Styles */
body, button {
  font-family: "HarryP", Arial, sans-serif;
}

/* Fallback font for words and input */
#currentWord, #upcomingWords, #typing-input {
    font-family: "Times New Roman", sans-serif; /* fallback / readable font */
}

/* Text shadow for better visibility */
body, h1, h2, h3, p, label {
  color: #fff;
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.8),
    0 0 0.9375rem rgba(0,0,0,0.7),
    0 0 1.25rem rgba(0,0,0,0.6);
}

/* Body styles */
body {
  margin: 0;
  height: 100vh;
  background-image: url("./images/background (1).gif");
  background-size: cover;        
  background-position: center;   
  background-repeat: no-repeat; 
  background-attachment: fixed;  
  font-family: "HarryP", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title styles */
h1 {
  position: relative;
  margin-top: 2rem;   /* Use rem for spacing */
  font-size: 5rem;               
  color: #E6C200;                
  font-family: 'HarryP', serif;  
  text-align: center;

  text-shadow:
    0 0 0.625rem rgba(0,0,0,1),
    0 0 0.625rem rgba(0,0,0,0.8),
    0 0 0.375rem #FFD700,
    0 0 0.75rem #FFD700,
    0 0 1.25rem rgba(255, 215, 0, 0.8);

  letter-spacing: 0.125rem;            /* spreads letters a little for logo look */
  margin: 0;
  padding: 1.25rem 0;
  z-index: 62.5rem;
}

/* Menu: basic settinng for further customization */
#menu {
  text-align: center;
  font-size: 1.875rem;
}

#menu label {
  margin: 0 0.625rem;
}

/*Positions difficuty header*/
p.difficulty {
  text-align: center;
  font-size: 3.125rem;
  margin-top: 0rem;
  margin-bottom: 2.5rem;
}

/*remove the dot before the option*/
.option input[type="radio"] {
  display: none;
}

/*Display different difficulties when unselected*/
.option span {
  display: inline-block;
  margin: 0.625rem 1.25rem;
  font-size: 3.5rem;
  color: #eee;
  cursor: pointer;
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.7),
    0 0 1.25rem rgba(0,0,0,0.5),
    0 0 1.875rem rgb(0, 0, 0),
    0 0 2,5rem rgb(0, 0, 0),
    0 0 3.75rem rgb(0, 0, 0);
  transition: transform 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}

/*Hover effect for difficulties*/
.option span:hover {
  color: #FFD700;
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.8),
    0 0 0.375rem #FFD700,
    0 0 0.75rem #FFD700;
}

/*Difficulty selection effect*/
.option input[type="radio"]:checked + span {
  color: #FFD700;
  transform: scale(1.12) !important;
  text-shadow:
  0 0 0.4375rem rgba(0,0,0,0.8),
  0 0 0.375rem #FFD700,
  0 0 0.75rem #FFD700,
  0 0 1.25rem rgba(255, 215, 0, 0.8)
}

/*Position and style wordset header*/
p.wordset {
  text-align: center;
  font-size: 3.125rem;                 
  margin-top: 0.625rem;                
  margin-bottom: 1.875rem;         
  color: #fff;                      
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.8),     
    0 0 0.9375rem rgba(0,0,0,0.7),
    0 0 1.25rem rgba(0,0,0,0.6);
}

/*Position word choice since one option is shorter than the other*/
.wordset-option {
  position: relative;
  left: 1.875rem; /* fine-tune */
}

/*remove the dot before the bank of words options*/
.wordset-option input[type="radio"] {
  display: none;
}

/*Display two different banks of words*/
.wordset-option span {
  display: inline-block;
  margin: 0.625rem 1.25rem;
  font-size: 2.5rem;
  color: #eee;
  cursor: pointer;
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.7),
    0 0 1.25rem rgba(0,0,0,0.5),
    0 0 1.875rem rgb(0, 0, 0.5),
    0 0 2.5rem rgb(0, 0, 0.5),
    0 0 3.75rem rgb(0, 0, 0.5);
  transition: transform 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}

/*Hover effect for wordset options*/
.wordset-option span:hover {
  color: #FFD700;
  text-shadow:
    0 0 0.625rem rgba(0,0,0,0.8),
    0 0 0.375rem #FFD700,
    0 0 0.75rem #FFD700;
}

/*Wordset selection effect*/
.wordset-option input[type="radio"]:checked + span {
  color: #FFD700;
  transform: scale(1.12) !important;
  text-shadow:
  0 0 0.4375rem rgba(0,0,0,0.8),
  0 0 0.375rem #FFD700,
  0 0 0.75rem #FFD700,
  0 0 1.25rem rgba(255, 215, 0, 0.8)
}

/* --- Tooltip Styles --- */
/*tooltip container, giving describing to the wordset options*/
.tooltip {
  position: relative;
  cursor: help;
}

/*tool tip fonts and styling*/
.tooltip-text {
  visibility: hidden;
  width: 13.75rem;
  background: rgba(15, 15, 15, 0.95); /* Nearly black, slightly transparent */
  color: #fff;
  text-align: center;
  padding: 0.75rem;
  border: 0.0625rem solid #FFD700;
  border-radius: 0.25rem;

  box-shadow:
    0 0 0.9375rem rgba(0,0,0,0.9),       
    0 0 0.625rem rgba(255, 215, 0, 0.4),
    inset 0 0 0.9375rem rgba(255, 215, 0, 0.1);
  
  font-family: "HarryP", serif;
  font-size: 1.375rem;
  font-style: italic;
  letter-spacing: 0.0625rem;
  line-height: 1.2;

  position: absolute;
  bottom: 135%;
  left: -13%;
  margin-left: 0rem;
  transform: translateX(-50%);
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: 0.0625rem solid rgba(255, 215, 0, 0.3);
  background-image: 
    linear-gradient(to right, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to bottom, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to left, #FFD700 1.25rem, transparent 1.25rem),  
    linear-gradient(to bottom, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to right, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to top, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to left, #FFD700 1.25rem, transparent 1.25rem),
    linear-gradient(to top, #FFD700 1.25rem, transparent 1.25rem);
  background-repeat: no-repeat;
  background-size: 100% 0.125rem, 0.125rem 100%, 100% 0.125rem, 0.125rem 100%;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/*more styling to the tooltip*/
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.5rem;
  border-width: 0.5rem;
  border-style: solid;
  border-color: #FFD700 transparent transparent transparent;
}

/*make the tooltip appear when hover on word*/
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY();
}

/*creating extra element/styling after the titles*/
p.difficulty::after, p.wordset::after {
  content: "";
  display: block;
  width: 11.875rem;               /* Short line centered */
  height: 0.1875rem;
  background: linear-gradient(to right, transparent, #FFD700, transparent);
  margin: 0.4375rem auto 0;        /* Center it and add space below */
  opacity: 0.7;
}


/* --- BUTTON STYLES --- */
button {
  position: relative;
  padding: 0.625rem 1.25rem;
  font-size: 1.125rem;
  border: none;
  border-radius: 3.125rem;
  background-color: #111; 
  color: #fff;
  cursor: pointer;
  overflow: visible; 
}

/* Glow effect using ::after pseudo-element */
button::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: -0.4rem;
  border-radius: 62.5rem;
  background-image: linear-gradient(to bottom right, #00bfff, #ff00ff);
  z-index: -1;

  opacity: 0.3;          /* 👈 base state */
  filter: blur(0.375rem);     /* 👈 base glow */
  transition: all 0.3s ease;
}

/* Hover animation of glowing */
button:hover::after {
  opacity: 1;
  filter: blur(1.125rem);
}

/*Start button customizer*/
#menu button {
  margin-top: 1.25rem;
  font-size: 1.75rem;        /* bigger text */
  padding: 0.75rem 1.5rem;     /* bigger clickable area */
  cursor: pointer;
  border-radius: 0.5rem;     /* optional: rounded corners */
  display: inline-block;
}

/* --- Game Container --- */
#game-container {
  width: 62.5rem;
  margin: o auto;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* so it doesn’t center based on text */
  position: relative;
  min-height: 40rem;
}

/* --- Countdown Number Styles --- */
#countdown {
  display: none;
  font-size: 6.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.875rem;
  
}

/* --------------- BATTLEFIELD  --------------- */
#battlefield {
  width: 43.75rem;
  height: 9.375rem;
  position: relative;   
  margin: 2rem auto;   /* fix it relative to the page */
  top: 0;              /* adjust vertical position */
  left: 0;               /* center horizontally */
  transform: none;
  z-index: 10;             /* make sure it’s above background */
  
  background-image: url('./images/battlefield.png'); 
  background-size: cover;
  background-position: bottom center;
  image-rendering: pixelated;
  border-radius: 0.625rem;
  overflow: hidden; /*what happens when content is bigger than container*/
  border: 0.125rem solid #444;
}



/* ------------------ Characters ------------------------ */

/* Player character */
#char-left {
  position: absolute;
  bottom: 0.625rem;
  left: 0.625rem;
  height: 6.25rem; /* Adjust to sprite size */
  z-index: 3;
}

/* Computer character */
#char-right {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  height: 6.25rem; /* Adjust to sprite size */
  z-index: 3;
}

/* Characters before spellcasting */
#char-left-no-spell {
  position: absolute;
  bottom: 0.625rem;
  left: 0.625rem;
  height: 6.25rem; /* Adjust to sprite size */
  z-index: 3;
}

/* Computer character before spellcasting */
#char-right-no-spell {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  height: 6.25rem; /* Adjust to sprite size */
  z-index: 3;
}

/* Hide characters during countdown and winning/losing screen */
.hidden {
  display: none;
}

/* Explosion, animation that happens when a spell touches a character, so when a game ends */
.explosion {
  position: absolute;
  bottom: 0;
  width: 8.75rem;
  height: 8.75rem;
  image-rendering: pixelated;
  z-index: 10;
  pointer-events: none;
}

/* Explosion positions */
#explosion-left {
  left: 0.625rem;   /* same as charLeft */
}

#explosion-right {
  right: 0.625rem;  /* same as charRight */
}



/* Win Animations Positioning */
.win-anim {
  position: absolute;
  bottom: 0.625rem;    /* Aligns with the characters' feet */
  height: 6.25rem;
  z-index: 3;     /* Ensures it's above everything else */
  pointer-events: none;
  image-rendering: pixelated;
}


/*when the player wins*/
#win-left {
  left: 0.625rem;      /* Directly over the player's spot */
}

/*when the computer wins*/
#win-right {
  right: 0.625rem;     /* Directly over the enemy's spot */
}

/* Ensure the hidden class actually works on the winning characters, since we do not want to see then win yet*/
.hidden {
  display: none !important;
}


/* -------------- BEAM SETTINGS ----------- */

/* Player's Beam*/
#beam-left {
  position: absolute;
  height: 5.625rem; 
  /* Use the red beam image */
  background-image: url('./images/red-beam.png');
  /* Extent the laser horizontally */
  background-repeat: repeat-x;
  background-position: center left;
  background-size: contain; 
  
  /* ALIGNMENT FOR PLAYER (Left) */
  /* The player sprite is 100px tall. The wand is roughly 60% down. */
  top: 2.875rem;   
  /* The player starts at 10px left. The wand tip is roughly 70px wide. */
  left: 6.875rem;  
  
  width:0rem; 
  z-index: 4;
}

/* Computer's Beam*/
#beam-right {
  position: absolute;
  height: 5.625rem;
  /* Use the green beam image */
  background-image: url('./images/green-beam.png');
  /* Extend the laser horizontally */
  background-repeat: repeat-x;
  background-position: center right;
  background-size: contain;

  /* ALIGNMENT FOR COMPUTER (Right) */
  /* The computer sprite is 100px tall. The wand is higher up, around 45% down. */
  top: 2.875rem;
  /* The computer starts at 10px from right. Wand tip extends inward. */
  right: 6.875rem; 
  
  width: 0rem; 
  z-index: 4;
}

/* The Clash Explosion, intersection of the two lasers */
#clash-point {
  position: absolute;
  /* Size: Needs to be slightly larger than the 90px beams to cover the seam */
  width: 8.125rem; 
  height: 6.25rem;
  top: 2.5rem; 
  
  left: 35.625rem; /* JS controls this through the moveRope function */
  transform: translateX(-50%); /* Keeps the image centered on the coordinate */
  
  z-index: 5; /* Ensures it sits on top of the beams */
  
  /* Keep the pixel art sharp */
  image-rendering: pixelated; 
}


/* ------------------ Typing Area ------------------------ */

/* --- Words Row, words that have to be typed currently --- */
#words-row {
  width: 100%;
  margin-bottom: 1.25rem;
  font-family: monospace;
  text-align: center; /* center the lines horizontally */
}

/* --- Lines --- */
#currentLine, #nextLine {
  font-size: 1.75rem;
  font-weight: bold;
  white-space: nowrap;    /* prevent wrapping, separating two lines in two lines */
  overflow-x: auto;       /* allow horizontal scroll if needed */
  margin: 0.3125rem auto;
  display: block;  /* important for centering */
  text-align: center;
  line-height: 1.4;
  max-width: 100%;        /* don't exceed container width */
}

/* --- Input, typebox where you type your words --- */
#typing-input {
  width: 21.875rem;
  font-size: 1.25rem;
  padding: 0.5rem;
  text-align: center;     /* center text inside input */
}

/* --- Letter Styles when typing --- */
.correct {
  color: rgb(41, 141, 207);
}

.incorrect {
  color: red;
}

.remaining {
  color: white;
}

/* --- Cursor, following letter by letter where you are at --- */
.cursor {
  display: inline-block;
  width: 0.125rem;
  height: 1.75rem;
  background: black;
  margin-left: 0.125rem;
  animation: blink 1s steps(1) infinite;
}

/*cursor effect of blinking*/
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --- Result Text, computer wins or player wins --- */
#result {
  font-size: 5rem;           /* Slightly smaller to fit the screen better */
  font-weight: bold;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;

  /* CHANGE: Allow wrapping so WPM can go on the next line */
  white-space: normal;      
  
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  
  /* ADD: Control the spacing between the two lines */
  line-height: 1.1; 
}

/* ADD: This makes the WPM line look like a subtitle */
#result span {
  display: block;           /* Forces the span onto a new line */
  font-size: 2.8125rem;          /* Makes the WPM smaller than the main message */
  opacity: 0.9;             /* Makes it look slightly different */
  color: #FFD700;           /* Gives the WPM a gold color to match your theme */
  margin-top: 0.625rem;
}

/*makes the laser hidden during countdown and end screens*/
.hidden-during-countdown {
  display: none !important;
}

#end-buttons {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  margin-top: 1.875rem;
  flex-wrap: nowrap;         /* NEVER wrap */
  width: 100%;               /* take full width of container */
}

#end-buttons button {
  white-space: nowrap;       /* keep text on one line */
  font-size: 2.25rem;
  padding: 1.25rem 2.5rem;
  margin: 0 1.25rem;
  cursor: pointer;
  border-radius: 0.5rem;
}


/* --- Fade & slide in animation --- */
/* Initial slide in animation (translateY only) */
@keyframes slideFadeIn {
  0% { opacity: 0; transform: translateY(3.125rem); }
  100% { opacity: 1; transform: translateY(0); }
}


/* Apply animation to menu elements */
#menu p.difficulty,
#menu p.wordset,
#menu .option span,
#menu .wordset-option span,
#menu button {
  opacity: 0;                     /* start hidden */
  animation: slideFadeIn 1s forwards;
}

/* Add delays for staggered effect */
#menu p.difficulty {
  animation-delay: 0.2s;
}

#menu p.wordset {
  animation-delay: 0.4s;
}

#menu .option span {
  animation-delay: 0.6s;
}

#menu .wordset-option span {
  animation-delay: 0.8s;
}

#menu button {
  animation-delay: 1s;
}