/**
 * Visibility Utilities
 * Utility classes for showing/hiding elements
 * These use !important because they must override all other styles
 * (especially for JavaScript-controlled screen visibility)
 */

/* ============================================
   HIDDEN UTILITY
   ============================================ */

.hidden {
  display: none !important;
}

.screen-hidden {
  display: none !important;
}

/* ============================================
   SCREEN VISIBILITY (JavaScript Controlled)
   ============================================ */

/* Title Screen - Visible by default */
#title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title Screen - Hidden state (JavaScript controlled) */
#title-screen.screen-hidden,
#title-screen.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Character Select Screen - Hidden by default */
#char-select-screen {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;
}

/* Character Select Screen - Visible state (JavaScript controlled) */
#char-select-screen:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}