/*
Name: Taniya Jeevanayagam
Date: March 7, 2026
Description: This is the stylesheet CSS page for my JS assignment app game.
I use it to style attributes for buttons, images, backgrounds, text, etc.
I also mainly use it to position and resize all elements on the screen.
I also use media queries to change specific attributes in the mobile version.
However, the majority of the code is flexible across all screen sizes.
Resources:
- https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity
- App is based on this game
*/

/* Sizes the entire page. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* Sizes the screen to fit. */
#container {
  width: 100%;
  height: 100%;
}

/* Sizes the background and app game to cover the entire screen. */
#gamePage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/splash.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Splash page animation screen. The background image will be underneath another GIF that is part of the splash page. It is also made into a horizontal screen. */
#splashPage {
  position: absolute;
  max-width: 768px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/splash.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Drawing surface for the ball animation. */
#menuCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Contains everything inside the menu. */
#menuOverlay {
  position: relative;
  width: 100%;
  padding: 20px;
  text-align: center;
  color: white;
  text-shadow: 3px 2px #111;
}

/* Menu logo sizing (Haikyuu logo). */
#menulogo {
  width: 300px;
  height: 100px;
}

/* Attributes for the title of the game. */
#menuOverlay h1 {
  margin-bottom: 18px;
  font-size: 40px;
  color: white;
}

/* Attributes for the highest score, which displays on the splash page menu. */
#menuBestScoreText {
  margin-top: 14px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

/* Stacks elements. */
.buttonArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Places buttons side by side. */
.menuButtonLine {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Attributes for all buttons. */
button {
  width: 180px;
  padding: 14px;
  font-size: 18px;
  color: #111;
  background: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* Adds a hover effect to buttons to make them look more clickable. */
button:hover {
  opacity: 0.95;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.52);
}

/* Attributes for the help button during gameplay, making it smaller. */
.smallHelpButton {
  width: 50px;
  height: 50px;
  font-size: 26px;
  padding: 0;
}

/* Attributes for the help button box that appears when the button is clicked. */
.helpBox {
  width: 320px;
  max-width: 90%;
  padding: 10px;
  text-align: left;
  color: white;
  background: rgba(255, 144, 40, 0.686);
  border-radius: 10px;
  font-size: 15px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.52);
}

/* Attributes for the help button on the menu. */
#menuHelpButton {
  position: relative;
}

/* Attributes for the help box on the menu, which appears when the button is clicked, and is also positioned with spacing. */
#menuHelpBox {
  position: relative;
  margin-top: 12px;
}

/* The actual container for the game itself, also made into a vertical screen, providing attributes to center and lay out elements. */
#gameContainer {
  position: relative;
  width: 360px;
  height: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Positions the button during gameplay, placing it at the top right of the screen, and ensuring it only displays during gameplay. */
#gameHelpButton {
  position: fixed;
  top: 10px;
  right: 10px;
  display: none;
}

/* Positions the help box for the help button during gameplay at the top right as well. */
#gameHelpBox {
  position: fixed;
  top: 70px;
  right: 10px;
  display: none;
  margin-top: 0;
}

/* When the user hits an obstacle, a black screen will show up instead, covering the entire screen and preventing the user from continuing to play. */
#gameOverScreen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

/* Prevents the game over screen from showing until needed. */
#gameOverScreen.hidden {
  display: none;
}

/* Container for the game over screen. */
#gameOverBox {
  width: 82%;
  padding: 20px;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.58);
}

/* Attributes for the title of the game over screen. */
#gameOverTitle {
  margin: 0 0 10px 0;
  font-size: 28px;
}

/* Attributes for the subtitle and stats of the game over screen. */
#gameOverSubtitle,
#gameOverStats {
  margin-top: 14px;
  font-size: 18px;
}

/* Attributes for the size and positioning of the game over image. */
#gameOverImage {
  width: 150px;
  height: 150px;
  margin-bottom: 16px;
  object-fit: contain;
}

/* Ensures everything fits correctly, for example, fitting the game stats correctly on both mobile and desktop. */
canvas {
  width: 100%;
  height: 100%;
}

/* Media queries changing attributes specifically for the mobile screen. */
@media screen and (max-width: 481px) {
  button {
    width: 120px;
    padding: 13px;
    font-size: 14px;
  }

  #splashPage {
    max-width: 480px;
    max-height: 375px;
  }

  #menuOverlay {
    padding: 12px;
  }

  #menuOverlay h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  #menuBestScoreText {
    font-size: 16px;
  }

  #gameHelpButton {
    top: 5px;
    right: 5px;
  }

  #gameHelpBox {
    position: fixed;
    top: 70px;
    right: 12px;
    font-size: 13px;
  }

  .smallHelpButton {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .helpBox {
    width: 220px;
    font-size: 12px;
  }

  #gameContainer {
    width: 95%;
    height: 85%;
  }

  #gameOverBox {
    width: 90%;
    padding: 16px;
  }

  #gameOverTitle {
    font-size: 24px;
  }

  #gameOverSubtitle,
  #gameOverStats {
    font-size: 15px;
  }

  #gameOverImage {
    width: 120px;
    height: 120px;
  }

  #menulogo {
    width: 200px;
    height: 100px;
  }
}