body,
html {
  margin: 0;
  overflow: hidden;          /* JS re-enables when overlay opens */
  touch-action: none;
  overscroll-behavior: none;
}

canvas {
  width: 100%;
  height: 100%;
}

/* ───────────────────────────────
   TOUCH OVERLAY
─────────────────────────────── */
#touch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* ───────────────────────────────
   HUD
─────────────────────────────── */
#score,
#timer {
  position: fixed;
  top: 10px;
  padding: 5px 30px;
  color: #fff;
  font-size: 4em;
  font-family: 'Creepster', cursive;
  background: rgba(0, 0, 0, 0);
  z-index: 2000;
}

#score { left: 10px; }
#timer { right: 10px; }

#target {
  position: fixed;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 5em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: rgba(0, 0, 0, 0);
  padding: 5px 1px;
  z-index: 2000;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0);
}
    #game-over {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Use a pixel-based max-width for desktops,
     and also ensure it doesn't exceed the screen on mobile. */
  max-width: 600px;  
  width: 80%;        /* fallback if screen is narrower than 600px */

  color: #fff;
  font-size: 3em; /* set to your preference */
  font-family: 'Creepster', cursive;

  background: rgba(0,0,0,0.7);
  padding: 10px 20px;
  text-align: center;

  display: none;
  z-index: 3000;
}

    #flash-overlay {
      position: fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      pointer-events:none;
      z-index:3500; 
      opacity:0; 
      transition:opacity 0.3s ease-out;
    }
    /* New ball alert message */
    #ball-alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3600;
      font-family: 'Creepster', cursive;
      font-size: 2em;
      color: #ff0000;
      background: rgba(0,0,0,0.8);
      padding: 10px 20px;
      border-radius: 5px;
      display: none;
    }
    /* New safe alert message */
    #safe-alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3600;
      font-size: 2em;
      color: #00ff00;
      background: rgba(0,0,0,0.8);
      padding: 10px 20px;
      border-radius: 5px;
      display: none;
    }
    /* Title screen container */
    #title-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #111;
      color: #fff;
      z-index: 4000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    
#controls-button {
  padding: 10px 20px;
  font-size: 1.5em;
  background-color: orange;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  clip-path: inset(0 100% 0 0);
  animation: revealButton 0.4s ease-out forwards 1.4s;
}

#sets-button {
  padding: 10px 20px;
  font-size: 1.5em;
  background-color: green;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  clip-path: inset(0 100% 0 0);
  animation: revealButton 0.4s ease-out forwards 1.4s;
}



    /* Title container acts as a mask */
    #title-container {
      overflow: hidden;
      width: 80%;
      text-align: center;
    }
    /* Title text with horizontal wipe animation */
    #title-text {
      font-size: 3em;
      margin-bottom: 20px;
      clip-path: inset(0 100% 0 0);
      animation: revealTitle 1.5s ease-out forwards 1s;
    }
    @keyframes revealTitle {
      from {
        clip-path: inset(0 100% 0 0);
      }
      to {
        clip-path: inset(0 0 0 0);
      }
    }
    /* Bouncing red ball */
    #bouncing-ball {
      position: absolute;
      width: 300px;
      height: 300px;
      background-image: url('https://readflexes.com/imgs/wordlibraries/red_texture.webp');
      border-radius: 50%;
      offset-path: path("M -780,190 Q -150,100 300,150 T 1100,190");
      -webkit-offset-path: path("M -780,190 Q -150,100 300,150 T 1100,190");
      animation: arcPath 3s ease-in-out forwards;
    }
    @keyframes arcPath {
      from {
        offset-distance: 0%;
      }
      to {
        offset-distance: 100%;
      }
    }
    @keyframes bounceBall {
      0% {
        left: -60px;
        top: 50%;
      }
      15% {
        left: 20%;
        top: 40%;
      }
      30% {
        left: 40%;
        top: 70%;
      }
      45% {
        left: 55%;
        top: 40%;
      }
      60% {
        left: 70%;
        top: 70%;
      }
      75% {
        left: 85%;
        top: 40%;
      }
      100% {
        left: calc(100% + 60px);
        top: 50%;
      }
    }
    #title-screen h1 {
      font-size:3em; 
      margin-bottom:20px;
    }
    #start-button {
      padding:10px 20px; 
      font-size:1.5em; 
      background-color:green;
      color:#fff; 
      border:none; 
      cursor:pointer; 
      clip-path: inset(0 100% 0 0);
      animation: revealButton 0.4s ease-out forwards 1.4s;
    }
    @keyframes revealButton {
      from {
        clip-path: inset(0 100% 0 0);
      }
      to {
        clip-path: inset(0 0 0 0);
      }
    }
    #pause-screen {
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%;
      background:rgba(0,0,0,0.8); 
      color:#fff; 
      z-index:4000; 
      display:none;
      flex-direction:column; 
      align-items:center; 
      justify-content:center;
    }
    #pause-screen h1 {
      font-size:3em; 
      margin-bottom:20px; 
    }
    .pause-button {
      padding:10px 20px; 
      font-size:1.5em; 
      color:#fff; 
      border:none; 
      cursor:pointer;
      margin:10px; 
      min-width:120px;
    }
    #continue-button { background-color:green; }
    #restart-button  { background-color:orange; }

/* Flashing tutorial arrow */
#tutorial-arrow {
  display: none;
  position: fixed;
  bottom: 120px;               /* sits just above the target (which is at 35px) */
  left: 50%;
  transform: translateX(-50%); /* only center horizontally now */
  font-size: 8.5em;            /* 10em × 0.85 = 8.5em (15% smaller) */
  font-weight: bold;
  color: white;
  text-shadow: 0 0 20px white;
  z-index: 5001;
  animation: flash 1s ease-in-out infinite;
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Flashing tutorial hint */
#tutorial-msg {
  display: none;
  position: fixed;
  bottom: 120px;             /* just above the target */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8em;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px white;
  z-index: 5002;
  animation: flash 1s ease-in-out infinite;
}

/* ───────────────────────────────
   WORD-SETS OVERLAY – desktop first
─────────────────────────────── */
#word-sets-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.9);
  z-index:4501;
  padding:1rem; box-sizing:border-box;
  /* keep the page still while hidden */
}
#word-sets-overlay.show{
  touch-action:pan-y; 
  display:flex;
  flex-direction:row;          /* 2 cols on desktop */
  justify-content:space-around;
  align-items:flex-start;
  overflow:hidden;             /* inner scroller gets the wheel */
}

/* inner wrapper = the part that scrolls */
#word-sets-overlay .library-list{
  display:flex; flex-direction:row; gap:2rem;
  width:100%;
  height:calc(100% - 2rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
#word-sets-overlay .library-column{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1rem; }
#word-sets-overlay h3{ margin:0 0 .5em; font-size:3em; color:#fff; }
#word-sets-overlay .library-column button{ font-size:3em; padding:.5em 1em; background:green; color:#fff; border:none; border-radius:.3em; cursor:pointer; }

/* ── Mobile ≤768 px ───────────────────────── */
@media (max-width:768px){

  body.overlay-open,
  html.overlay-open{
    overflow:auto !important;
    touch-action:auto !important;
    overscroll-behavior:auto !important;
  }

  /* overlay layout */
  #word-sets-overlay.show{
    touch-action:pan-y;
    flex-direction:column;
    align-items:center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* inner list */
  #word-sets-overlay .library-list{
    flex-direction:column;
    max-height:calc(100vh - 2rem);
  }

  /* sizes */
  #word-sets-overlay h3{ font-size:1.8em; text-align:center; }

  /* 👇 THIS is the final button style */
  #word-sets-overlay .library-column button{
    font-size:1.5em;      /* 50 % of desktop 3 em */
    padding:.4em .7em;
    width:90%;
    max-width:320px;
  }

  #word-sets-overlay .library-column{
    width:100%;
    margin:0 0 1rem;
    flex:none;
  }
}

/* ── Multiplication table symbol (64×64) ── */
#mult-table-symbol {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  z-index: 4501;      /* above HUD (2000) but below pause-screen (4000) */
  cursor: pointer;
}

/* ── Full-screen overlay ── */
#mult-table-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 6500;      /* above nearly everything */
}
#mult-table-overlay.show {
  display: flex;
}
#mult-table-overlay img {
  max-width: 90%;
  max-height: 90%;
  cursor: pointer;
}

/* On mobile, push the symbol below the 4em pause button */
@media (max-width: 768px) {
  #mult-table-symbol {
    top: calc(10px + 4em + 8px);
  }
}

/* ── Division icon (64×64) ── */
#div-table-symbol {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  z-index: 5001;
  cursor: pointer;
}

/* ── Full-screen overlay ── */
#div-table-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 6000;
}

#div-table-overlay.show {
  display: flex;
}

#div-table-overlay img {
  max-width: 90%;
  max-height: 90%;
}
/* Style for high scores button */
#highScoresBtn {
  padding: 10px 20px;
  font-size: 1.5em;
  background-color: #c00;   /* RED */
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s, opacity 0.2s;
  clip-path: inset(0 100% 0 0);
  animation: revealButton 0.4s ease-out forwards 1.4s;
}


#highScoresBtn.enabled {
  background-color: #c00;
  color: #fff;
  opacity: 1;
  cursor: pointer;
}


#highScoresBtn.locked {
  background-color: #880000;
  color: #eee;
  opacity: 0.7;
}
#auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 7000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 12px;
}
#auth-modal h2 {
  color: white;
  margin-bottom: 1em;
}
#auth-close {
  position: absolute;
  top: 1em;
  right: 2em;
  font-size: 2.2em;
  color: white;
  cursor: pointer;
}
#open-email-modal {
  margin-top: 1em;
  padding: 0.7em 2em;
  background: #00aaff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
}