/* ========== Fonts ========== */
@font-face {
  font-family: "Abadi";
  src: url("../fonts/Abadi.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ========== Variables ========== */
:root {
  --uiTxtColor: #354a65;
}

/* ========== HTML ========== */

body,html{
  user-select: none;margin:0;height:100%;background:#f5f5f7;color:#000;font-family:monospace;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .stage{position:relative;width:375px;height:812px;margin:0 auto;overflow:hidden;background:#000;border-radius:25px;box-shadow:0 8px 30px rgba(0,0,0,0.12);border:2px solid #333;}
  header{position:absolute;top:0;left:0;right:0;color:#000;display:flex;justify-content:space-between;align-items:center;padding:12px;font-size:14px;z-index:25;height:60px;}
  .multBadge{background:rgba(15,255,15,0.06);border:1px solid rgba(15,255,15,0.12);padding:4px 8px;border-radius:6px;font-weight:900}
  .multFlash{box-shadow:0 0 12px #00ff66;transform:scale(1.05);transition:transform .18s ease}
  .pointPopup{position:absolute;pointer-events:none;color:#000;background:rgba(255,255,255,0.92);padding:6px 10px;border-radius:8px;font-weight:900;font-size:18px;transform:translateY(0);opacity:1;transition:transform .7s ease-out,opacity .7s ease-out;z-index:60}
  .pointPopup.mult{color:#000;background:rgba(255,250,200,0.96);}
  #playfield{position:absolute;top:84px;bottom:0;left:0;right:0;overflow:hidden;z-index:10}
  /* Matrix-style playfield: black background for numbers mode */
  #playfield.matrix-mode{background:#000;}
  .drop{position:absolute;font-weight:bold;user-select:none;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);}
  /* Matrix-style numbers: neon green on black background for numbers mode */
  .drop.matrix-number{color:#00ff41;text-shadow:0 0 10px #00ff41,0 0 20px #00ff41,0 0 30px #00ff41;background:transparent;border-radius:4px;padding:2px 6px;}
  /* Keep original styling for balloons */
  .drop.balloon-piece{color:#000;}
    button{background:#0f0;color:#000;border:0;border-radius:4px;padding:6px 12px;font-weight:bold;cursor:pointer}
    @keyframes explodeGreen{0%{transform:scale(1);opacity:1;text-shadow:0 0 8px #00ff88}100%{transform:scale(5);opacity:0;text-shadow:0 0 22px #00ffaa}}
    @keyframes redX{0%{transform:scale(0.8);opacity:0}20%{opacity:1}100%{transform:scale(1.4);opacity:0}}
    .redx{position:absolute;pointer-events:none;font-weight:900;color:#f33;text-shadow:0 0 10px #ff0033;font-size:56px;animation:redX .5s ease-out forwards;}
  .overlay{position:absolute;inset:0;background:rgba(0,0,0,0.35);display:none;align-items:center;justify-content:center;z-index:20}
  .modal{background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.08);color:#000;padding:26px 29px;border-radius:13px;max-width:90%;text-align:center;font-size:23px}
  .modal h2{margin:0 0 13px 0;font-size:29px}
  .modal p{margin:10px 0;font-size:23px}
  .modal button{margin-top:16px;padding:13px 20px;font-size:20px}
  /* large, subtle turtle slow countdown behind the playfield */
  #turtleCountdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:8;pointer-events:none;}
  /* turtleCountdown uses a canvas sized to the playfield */
  /* balloons styling */
  .balloon-group {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
}

#startMenu {
  display: none !important; /* hide completely */
}

/* #region ========== Start Game Screen ========== */

#lesson-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.lesson-selector-btn {
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
}

#lesson-selector-text {
    min-width: 150px;
    text-align: center;
    color: yellow;
}

/* #endregion */

/* #region ========== Powerup ========== */

.lightning-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Lightning.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
}

.clock-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Clock.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
}

.turtle-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Turtle.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
}

/* #endregion */

/* #region ========== UI Components ========== */

/* ====== Game Top Bar ====== */
.ui-topbar { 
  background-image: url("../images/UI/Top.png"); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;    
  pointer-events: none;
  z-index: 5;  
}

.ui-targetword {
  position: absolute;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  z-index: 25; 
  display: flex;
  align-items: center;
}

.ui-scoreboard {
  background-image: url("../images/UI/Scoreboard.png"); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  position: absolute;
  top: 5px;
  left: 0px;
  width: 150px;
  height: 60px;    
  pointer-events: none;
  z-index: 20;  
}

.ui-score {
  font-size: 20px;
  color: #666;
  z-index: 25;
  position: absolute;
  top: 24px;
  left: 70px;
  width: 45px;
  text-align: right;
}

#gamePauseBtn {
  position: absolute;
  display: block !important;
  top: 0px;
  right: 20px;
  width: 72px;
  height: 72px;
  background-image: url("../images/UI/Pause.png"); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  z-index: 100;
}

/* ====== Target Word UI */
#ui-targetWord{
  position: absolute;
  top: 45px;
  left: 54%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  z-index: 25;
  display: flex;
  align-items: center;
}

/* Text behind */
#targetWordText {
  position: absolute;  
  z-index: 10;          
  color: black; 
  top: 0px;
  left: 50%;               /* start from center */
  transform: translateX(-50%);  /* shift so it’s truly centered */
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* Image on top */
#targetWordImage {
  position: absolute;   /* allow z-index */
  z-index: 20;          /* higher than text */
  width: 50px;
  height: 50px;
  top: -25px;
  left: -35px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ====== Round Timer ====== */
#roundTimer {
  position: relative;
  width: 103px;       /* set this */
  height: 103px;      /* set this */
  background-image: url("../images/UI/TimerSquare.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 30;
  top: 10px; 
  left: -110px;
}


/* CLOCK NUMBER */
#roundClock {
  display: block; /* or block */
  width: 900px;  
  width: 500px;
  position: absolute;
  font-size: 32px;
  font-weight: 900;
  color: #000;                       /* or green in numbers mode */
  z-index: 35;
}

/* RETICLE IMAGE */
#reticle {
  display: block;          /* inline-block also works */
  width: 24px;
  height: 24px;
  position: absolute;      /* position relative to parent (#roundTimer) */
  top: 80px;               /* distance from top edge of timer */
  left: 90px;              /* distance from left edge of timer */
  background-image: url("../images/UI/Reticle.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 36;
  
}

/* ====== Pause Menu ====== */
#pauseMenu {
  display: none;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../images/UI/PauseMenu.png");
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 350px;
  border: 8px solid white;
  border-radius: 30px;
  padding-top: 80px;
  margin: auto;
  z-index: 50;
}

.pauseMenu-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/UI/PauseMenuButton.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius: 40px;
  font-family: "Abadi", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: var(--uiTxtColor);
  cursor: pointer;
  width: 180px;
  height: 70px;
}

/* ====== Win/Lose Game Menu ====== */
#endMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 250px;
  height: 432px;
  
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;

  padding-bottom: 130px;
  z-index: 50;
  font-family: "Abadi", sans-serif;
  font-size: 20px;
  color: var(--uiTxtColor);
}

#finalScore,
#finalAcc {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#finalScore { top: 210px; }
#finalAcc   { top: 295px; }

#endMenuBtns {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: row;
  justify-content: center;

  width: auto;
  max-width: 300px;
}

#nextLsnBtn,
#retryBtn {
  all: unset;
  display: block;
  width: 180px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#nextLsnBtn {
  background-image: url('../images/UI/NextButton.png');
  margin-left: 10px;
}

#retryBtn {
  background-image: url('../images/UI/RetryButton.png');
}

/* #endregion #/