body { 
  padding: 0; 
  margin: 0; 
  background: #1a1a1a;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Mobile-specific body styles */
body.unity-mobile {
  /* Use dynamic viewport height with fallbacks */
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  /* Prevent overscroll/bounce */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Safe area padding for notched devices */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { 
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Multiple fallbacks for mobile height */
  height: 100%;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  /* Safe area insets 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);
  box-sizing: border-box;
  overflow: hidden;
}
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { 
  width: 100%; 
  height: 100%;
  display: block;
  touch-action: none;
}

#unity-loading-bar { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  display: none;
  text-align: center;
}

#unity-logo { 
  width: 154px; 
  height: 80px; 
  margin: 0 auto;
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#unity-logo::after {
  content: "Loading...";
}

#unity-progress-bar-empty { 
  width: 200px; 
  height: 12px; 
  margin-top: 10px; 
  background: #333;
  border-radius: 6px;
  overflow: hidden;
}

#unity-progress-bar-full { 
  width: 0%; 
  height: 100%; 
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 6px;
  transition: width 0.1s ease-out;
}

#unity-footer { 
  position: relative;
  height: 38px;
  background: rgba(0,0,0,0.3);
}

.unity-mobile #unity-footer { display: none }

#unity-logo-title-footer { 
  float: left; 
  width: 102px; 
  height: 38px;
  line-height: 38px;
  padding-left: 10px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #888;
}

#unity-build-title { 
  float: right; 
  margin-right: 10px; 
  line-height: 38px; 
  font-family: arial; 
  font-size: 18px;
  color: white;
}

#unity-fullscreen-button { 
  cursor: pointer; 
  float: right; 
  width: 38px; 
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 20px;
  color: white;
}

#unity-fullscreen-button::after {
  content: "⛶";
}

#unity-fullscreen-button:hover {
  background: rgba(255,255,255,0.1);
}

#unity-warning { 
  position: absolute; 
  left: 50%; 
  top: 5%; 
  transform: translate(-50%); 
  background: white; 
  padding: 10px; 
  display: none;
  border-radius: 4px;
}

/* Force landscape on mobile */
#rotate-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Multiple fallbacks for height */
  height: 100%;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #1a1a1a;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  /* Safe area padding */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#rotate-overlay .rotate-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: rotate-phone 1.5s ease-in-out infinite;
}

#rotate-overlay .rotate-text {
  font-size: 20px;
  padding: 0 20px;
}

@keyframes rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

@media screen and (orientation: portrait) {
  .unity-mobile #rotate-overlay {
    display: flex;
  }
}

/* iOS Safari fullscreen fixes */
@supports (-webkit-touch-callout: none) {
  body.unity-mobile,
  #unity-container.unity-mobile,
  #rotate-overlay {
    /* Use -webkit-fill-available as additional fallback for iOS */
    min-height: -webkit-fill-available;
  }
}

/* Ensure canvas fills container properly in fullscreen */
:fullscreen #unity-canvas,
:-webkit-full-screen #unity-canvas {
  width: 100% !important;
  height: 100% !important;
}