@font-face {
  font-family: "GraffitiPaintBrush";
  src: url('fonts/GraffitiPaintBrush.woff') format('woff'),
       url("fonts/GraffitiPaintBrush.ttf") format("truetype");
}

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

body {
  height: 100%;
  width: 100%;
  height: 100vh; /* Use viewport height for mobile */
  height: 100dvh; /* Use dynamic viewport height (iOS Safari) */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000; /* Black background behind game (will show in letterbox areas) */
  /* Prevent pull-to-refresh and overscroll on mobile */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* Prevent text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent touch callout on iOS */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.centered {
  margin: 0;
  position: absolute;
  left: 50%;
}

/* Force the custom font to be loaded for canvas usage */
.font-preload {
  position: absolute;
  font-family: GraffitiPaintBrush;
  color: transparent;
}

/* Game container */
#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: transparent; /* Transparent so CSS backgrounds show through */
}

/* Background layers - desktop default (full screen) */
#bg-start-screen,
#bg-menu-screen,
#bg-game-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

#bg-menu-screen,
#bg-game-screen {
  width: 125%;
}

/* Mobile landscape - WIDE screens only (iPhone 14 Pro Max, etc.) - constrain width to reduce vertical cropping */
@media screen and (min-aspect-ratio: 2/1) and (orientation: landscape) {
  #bg-start-screen,
  #bg-menu-screen,
  #bg-game-screen {
    left: 8%;
    width: 85%;
    background-position: bottom;
  }
}

/* Mobile landscape - narrower screens (iPhone SE, etc.) - use full width like desktop */
@media screen and (max-aspect-ratio: 19/10) and (max-width: 932px) and (orientation: landscape) {
  #bg-start-screen,
  #bg-menu-screen,
  #bg-game-screen {
    left: 0;
    width: 100%;
    background-position: center center;
  }
}

/* Background images */
#bg-start-screen {
  background-image: url('../assets/img/start_screen_1366x768.jpg');
  background-position: center center;
}

#bg-menu-screen {
  background-image: url('../assets/img/game_screen_with_milo_1366x768.jpg');
  display: none; /* Hidden by default - used for menu screens */
}

#bg-game-screen {
  background-image: url('../assets/img/game_screen_1366x768.jpg');
  display: none; /* Hidden by default - used during actual gameplay (no Milo) */
}

/* Phaser canvas - transparent background, on top of CSS backgrounds */
#gameCanvas, canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}