/*
 * Styles for the Asteroid Orbit game.  These rules define
 * the layout for the game canvas, overlays (splash, map,
 * level splash, game over) and mobile controls.  The map
 * container displays selectable sectors in a grid.
 */

body {
  margin: 0;
  background: #111;
  overflow: hidden;
  font-family: sans-serif;
}

/* Fullscreen canvas used for the game.  It is dynamically sized
   in the JavaScript to always match the viewport dimensions. */
#gameCanvas {
  background: #212121;
  display: block;
}

/* Generic overlay styling used by splash, map, game over and
   level splash screens. */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 2;
}

.overlay h1 {
  margin-bottom: 20px;
}

.overlay p {
  max-width: 600px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

.overlay button {
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  margin-top: 10px;
}

/* Game over screen replicates the original styling with large text
   and centred positioning.  The overlay is vertically centred and
   spans the width of the viewport. */
#gameOver {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 2.5em;
  background: none;
  display: none;
  z-index: 2;
}

#gameOver div {
  margin: 15px 0;
  font-size: 0.5em;
}

#gameOver button {
  padding: 10px 20px;
  font-size: 0.6em;
  cursor: pointer;
  margin-top: 10px;
}

/* Map container styles.  The map displays sector buttons in a
   flexible grid that wraps across the viewport. */
/* Map screen receives a subtle starfield background to evoke space. */
#mapScreen {
  background-color: #03031e;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 2px), radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 2px);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}

/* Map container arranges sector nodes in a flexible grid. */
#mapContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  max-width: 90%;
  margin-top: 20px;
}

/* Each sector on the map is rendered as a circular celestial body.
   Unlocked sectors are highlighted with a glowing border, while
   locked sectors appear subdued. */
.mapSector {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e2b3a, #162330);
  border: 2px solid #5e6fa8;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.4em;
  box-shadow: 0 0 15px rgba(110, 140, 200, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mapSector:hover:not(.locked) {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(110, 140, 200, 0.6);
}

.mapSector.locked {
  background: #3a3a4f;
  border-color: #555;
  cursor: default;
  opacity: 0.4;
  box-shadow: none;
}

/* On‑screen joystick controller.  It appears only on touch devices
   and is sized relative to the viewport so that it scales nicely
   on phones and tablets. */
#joystickContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 33vw;
  height: 33vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  z-index: 10;
  display: none;
}

#joystick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
}

/* On‑screen fire button for touch devices */
#fireButton {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 16.67vw;
  height: 16.67vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1em;
  z-index: 10;
  display: none;
}

/* On-screen weapon-mode toggle (touch devices) */
#toggleButton {
  position: fixed;
  bottom: 20px;
  /* place it just to the right of the Fire button                       */
  left: calc(20px + 16.67vw + 12px);   /* 12 px gap after the fire pad   */
  width: 16.67vw;                      /* same circular size as Fire     */
  height: 16.67vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.8em;                    /* a bit smaller text             */
  z-index: 10;
  display: none;                       /* the JS sets it to block/none   */
}