/* Custom OTF Font */
@font-face {
  font-family: 'ARG-Font';
  src: url('/fonts/CustomFont.otf') format('opentype');
  font-display: swap;
}


/* Base Styles */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #6A35EE;
  overflow: hidden;
  touch-action: manipulation;
}


/* Shared Screen Styles */
#password-screen, #timer-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}


/* Password Display - Perfect Responsiveness */
#password-display {
  font-size: min(4.5rem, 8vw);
  letter-spacing: min(1rem, 2vw);
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}


/* Timer Display */
#timer {
  font-size: min(6rem, 10vw);
  text-shadow: 0 0 1rem #6A35EE;
  margin-bottom: 2.5rem;
  white-space: nowrap;
}


/* Stay Tuned Message */
#stay-tuned {
  font-size: min(3rem, 5vw);
  text-shadow: 0 0 0.8rem #6A35EE;
  opacity: 0.8;
  animation: pulse 2s infinite;
}


/* Mobile-Specific Fine-Tuning */
@media (max-width: 768px) and (orientation: portrait) {
  #password-display {
    font-size: min(3.5rem, 9vw); /* Slightly more aggressive scaling */
    letter-spacing: min(0.8rem, 1.5vw);
    padding: 0 2%;
  }
 
  #numbers {
    font-size: min(4.5rem, 8vw);
  }
}


/* Hidden Input */
#password-input {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}


/* Animations */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}


.hidden {
  display: none !important;
}