/* Reset and base styles */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.87);
  background-color: #0f0f0f;

  /* Prevent text selection on mobile */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* Prevent elastic scrolling/bounce on iOS */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;

  /* Prevent pull-to-refresh */
  touch-action: none;
}

/* Main app container with safe area support */
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* Use dvh (dynamic viewport height) to handle keyboard correctly on mobile */
  /* Fallback to 100vh for older browsers */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Safe area padding for notched devices */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Game container fills available space */
#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Phaser canvas styling */
#game-container canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* Enable smooth touch scrolling */
  touch-action: none;
}

/* Orientation lock message (shown when landscape on portrait-preferred screens) */
.orientation-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  color: #00d9ff;
  font-family: Arial, sans-serif;
  z-index: 10000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.orientation-message .icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: rotate-hint 2s ease-in-out infinite;
}

.orientation-message h2 {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.orientation-message p {
  font-size: 16px;
  color: #888;
  margin: 0;
}

@keyframes rotate-hint {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

/* Show orientation message when in portrait mode (landscape-only game) */
@media screen and (orientation: portrait) {
  .orientation-message {
    display: flex;
  }
  #game-container {
    display: none;
  }
}

/* Ensure game container fills screen in landscape */
@media screen and (orientation: landscape) {
  .orientation-message {
    display: none;
  }
  #game-container {
    display: flex;
  }
}

/* Loading/splash screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-screen .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #333;
  border-top-color: #00d9ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* HTML Preloader - shown before Phaser loads */
#html-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.5s ease-out;
}

#html-preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: fadeInScale 0.6s ease-out;
}

.preloader-logo {
  width: 128px;
  height: 128px;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 217, 255, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.preloader-text {
  font-size: 36px;
  font-weight: 700;
  color: #00d9ff;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

.preloader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #00d9ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.preloader-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}