/* Fullscreen Button Styles */

#fullscreen-button {
  position: absolute;
  /* Center horizontally, position below logo (same as Demo Start button) */
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
  z-index: 10001;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: "Cinzel", serif;
  font-size: min(2vw, calc(100vh * 16 / 9 * 0.02));
  font-weight: 400;
  cursor: pointer;
  padding: 12px 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  display: none; /* Hidden by default, JavaScript will show it on mobile start screen */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  pointer-events: auto;
}

#fullscreen-button:hover {
  color: #cccccc;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

/* Mobile-specific styles - DISABLED: Fullscreen doesn't work on mobile */
/* These styles hid the Demo Start button on mobile until fullscreen was activated */
/* Uncomment when re-enabling fullscreen functionality
@media (max-width: 1024px) {
  #btn-play.demo-start-button {
    display: none;
  }
  
  body.fullscreen-active #btn-play.demo-start-button {
    display: block;
  }
}
*/

/* Desktop: Always show Demo Start, never show Fullscreen */
@media (min-width: 1025px) {
  #fullscreen-button {
    display: none !important;
  }
  
  #btn-play.demo-start-button {
    display: block !important;
  }
}

/* Button visibility is controlled by JavaScript */
/* CSS provides base styling, JS handles show/hide logic */