/* Fritidshack – the game box shared by the games: score bar, start/game over screen,
   corner buttons and fullscreen. Each game adds its own CSS for its size and sky.
   Used together with js/game-ui.js. */

/* Phones with a camera hole/notch: the page may use the whole screen (viewport-fit=cover in
   index.html), so keep the normal page content out from under the camera. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.stage {
  /* How far the buttons must stay from the camera hole (only needed in fullscreen, see below) */
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin-bottom: 2rem;
  background: var(--bg);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 18px rgba(94, 240, 255, 0.35);
  overflow: hidden;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Touch steering: no scrolling, zooming, text selection or long-press menu on the game */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.hud {
  position: absolute;
  top: calc(0.95rem + var(--safe-top));
  left: calc(4.25rem + var(--safe-left));    /* room for the pause icon */
  right: calc(4.25rem + var(--safe-right));  /* room for the fullscreen icon */
  display: flex;
  justify-content: space-between;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}

.hud strong {
  margin-left: 0.4rem;
  font-size: 1.6rem;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 233, 77, 0.6);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right))
    calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
  text-align: center;
  background: rgba(14, 10, 36, 0.78);
}

.overlay h2 {
  margin: 0 0 0.5rem;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 14px rgba(255, 233, 77, 0.6);
}

.overlay p {
  max-width: 34rem;
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
}

/* Always-visible icon buttons in the corners: half see-through so they don't hide the game */

.icon-button {
  position: absolute;
  z-index: 2;                            /* above the start/game over screen */
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--text);
  background: rgba(14, 10, 36, 0.7);
  border: 2px solid var(--cyan);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.icon-button svg {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-button:hover,
.icon-button:focus-visible {
  opacity: 1;
  box-shadow: 0 0 10px var(--cyan);
}

.pause-button {
  top: calc(0.6rem + var(--safe-top));
  left: calc(0.6rem + var(--safe-left));
}

.fullscreen-button {
  top: calc(0.6rem + var(--safe-top));
  right: calc(0.6rem + var(--safe-right));
}

.mute-button {
  right: calc(0.6rem + var(--safe-right));
  bottom: calc(0.6rem + var(--safe-bottom));
}

/* Fullscreen: the game fills the whole screen (also used as a stand-in on phones that
   can't do real fullscreen, like iPhone) */
.stage.is-fullscreen {
  /* The game now reaches under the camera hole – keep the buttons and score clear of it */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border: none;
  box-shadow: none;
}

body.game-fullscreen {
  overflow: hidden;                      /* the page behind must not scroll */
}