/* ==========================================================================
   loading.css — Loading screen + START GAME button
   Mobile-first. Extracted from original styles.css lines 122-245.
   ========================================================================== */

/* ---------- Body lock during loading ---------- */
body.loading-active {
  overflow: hidden;
  height: 100vh; /* fallback */
  height: 100dvh;
}

/* ---------- Loading overlay ---------- */
.loading {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Binary counter display ---------- */
.loading-binary {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 0.2em;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(251, 191, 36, 0.3),
    0 0 20px rgba(251, 191, 36, 0.1);
}

.binary-digit {
  display: inline-block;
  min-width: 0.65em;
  text-align: center;
  opacity: 0;
}

/* ---------- Loading text ---------- */
.loading-text {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: clamp(0.6rem, 2vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-top: var(--space-3);
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
  text-align: center;
}

/* ---------- Progress bar ---------- */
.loading-bar-container {
  width: clamp(160px, 50vw, 280px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: var(--space-4);
}

.loading-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.6), rgba(255, 255, 255, 0.8));
  transform-origin: left;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* ---------- START GAME button ---------- */
.start-game {
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: none;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  animation: blink-text 1s step-end infinite;
  /* Touch-friendly: minimum 44px tap target */
  padding: var(--space-4) var(--space-8);
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.start-game .start-arrow {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  font-size: 1.3em;
  display: inline-block;
  margin-left: 0.15em;
  transform: translateY(-0.15em);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* ---------- Pixel heart images (replace binary digits on complete) ---------- */
.binary-digit img {
  height: 100%;
  width: auto;
  image-rendering: pixelated;
}

/* ---------- Blink keyframe ---------- */
@keyframes blink-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==========================================================================
   Tablet+ (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .loading-binary {
    font-size: clamp(1.2rem, 3vw, 2rem);
  }

  .loading-bar-container {
    width: clamp(180px, 30vw, 280px);
  }
}

/* ==========================================================================
   Pointer: fine (mouse/trackpad) — hover states
   ========================================================================== */
/* Active state (tap on mobile, click on desktop) */
.start-game:active .start-arrow,
.start-game.pressed .start-arrow {
  color: #ef4444;
  text-shadow:
    0 0 10px #ef4444,
    0 0 25px rgba(239, 68, 68, 0.8),
    0 0 50px rgba(239, 68, 68, 0.5);
}

@media (pointer: fine) {
  .start-game:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    animation: none;
  }

  .start-game:hover .start-arrow {
    color: #ef4444;
    text-shadow:
      0 0 10px #ef4444,
      0 0 25px rgba(239, 68, 68, 0.8),
      0 0 50px rgba(239, 68, 68, 0.5);
  }
}