@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  background: #221d38;
  color: whitesmoke;
  overflow-x: hidden;
}

canvas {
  background: #867443;
  background: radial-gradient(circle at 33% 115%, #867443 4%, #805a42 15%, #221d38 34%);
  background-position-y: 147px;
}

.wrapper {
  font-family: "Fredericka the Great", cursive;
  position: relative;
}

.game_space {
  background-color: #5f5f5f;
  background: radial-gradient(circle, #867443 4%, #805a42 15%, #221d38 34%);
  border: 1px solid #666;
  color: whitesmoke;
  left: 50%;
  margin-top: -6px;
  position: fixed;
  top: 21rem;
  transform: translate(-50%, -50%);
  width: 720px;
}

.game_space.playing {
  cursor: none;
}

.canvasWrapper {
  animation: ship_move_y 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, ship_move_x 2.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  background: url("https://assets.codepen.io/215128/ship_dark.webp");
  background-repeat: no-repeat;
  background-position: -210px 190px;
  height: 300px;
  position: relative;
  width: 720px;
  z-index: 0;
}

@keyframes ship_move_x {
  0% {
    background-position-x: -210px;
  }
  50%, 100% {
    background-position-x: 350px;
  }
}

@keyframes ship_move_y {
  0% {
    background-position-y: 190px;
  }
  50%, 100% {
    background-position-y: 75px;
  }
}

.messaging {
  font-size: 4rem;
  left: 50%;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-shadow: 1px 1px 10px whitesmoke;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.messaging span {
  display: inline-block;
}

.messaging span.h2 {
  font-size: 2.5rem;
  text-shadow: 1px 1px 10px firebrick;
}

.messaging span.h3 {
  font-size: 1.9rem;
  margin-top: 10px;
  text-align: left;
  text-shadow: 1px 1px 10px #241e9e;
}

.messaging span.h3 .action {
  margin-top: 0;
  width: 55px;
}

.level_display,
.score_display {
  animation: reveal_score_display 1.5s ease-out forwards;
  animation-delay: 1.5s;
  font-size: 1.6rem;
  height: 2.5rem;
  margin: -8rem auto 0;
  overflow: hidden;
  padding: 0 8px;
  text-align: right;
  width: 720px;
}

.level_display {
  animation: reveal_level_display 1.5s ease-out forwards;
  text-align: left;
}

.level_display.hidden,
.score_display.hidden {
  margin-top: -8rem;
}

@keyframes reveal_score_display {
  0% {
    margin-top: -8rem;
  }
  50%, 100% {
    margin-top: 3rem;
  }
}

@keyframes reveal_level_display {
  0% {
    margin-top: -8rem;
  }
  50%, 100% {
    margin-top: -2.5rem;
  }
}

.loading_font {
  position: fixed;
  top: -9999px;
}

.hidden {
  display: none;
}

/* ---------------------------------
   HOME BUTTON STYLE (from button.css)
---------------------------------- */
.button-container {
  text-align: center;
  margin: 20px 0;
}

.button {
  background-color: #0b3d91;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:hover {
  background-color: #1c56c0;
  transform: scale(1.05);
}

/* ---------------------------------
   MOBILE TILT BUTTONS (only show on ≤500px)
---------------------------------- */
.tilt-controls {
  display: none;
}

@media (max-width: 500px) {
  html {
    font-size: 56%;
  }

  body {
    font-size: 1.4rem;
  }

  .game_space {
    position: relative;
    width: 95%;
    height: auto;
    top: unset;
    left: unset;
    transform: none;
    margin: 20px auto;
  }

  .canvasWrapper {
    width: 100%;
    height: 200px;
    background-size: cover;
  }

  .score_display,
  .level_display {
    width: 95%;
    font-size: 1.6rem;
    text-align: center;
    margin: 10px auto;
  }

  .tilt-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    gap: 10px;
  }

  .tilt-btn {
    background-color: #0b3d91;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    width: 80%;
    max-width: 300px;
    transition: 0.3s;
  }

  .tilt-btn:hover {
    background-color: #1c56c0;
    transform: scale(1.05);
  }
}

/* Optional Tablet View */
@media (min-width: 501px) and (max-width: 1024px) {
  .game_space {
    width: 90%;
    height: auto;
  }

  .canvasWrapper {
    height: 250px;
  }
}