:root {
            --bg-body: #050816;
            --info-bg: rgba(10, 10, 25, 0.78);
            --info-border: rgba(255, 255, 255, 0.3);
            --info-text: #ffffff;
        }

        body {
            margin: 0;
            overflow: hidden;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: radial-gradient(circle at top, #432371 0%, #1c2541 35%, #050816 100%);
        }

        canvas { 
            display: block; 
            touch-action: none; /* evita scroll raro en móvil */
        }


        #info {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            max-width: 420px;
            text-align: center;
            color: var(--info-text);
            pointer-events: none;
            padding: 10px 16px;
            border-radius: 999px;
            background: var(--info-bg);
            border: 1px solid var(--info-border);
            backdrop-filter: blur(10px);
            font-size: 13px;
            letter-spacing: 0.03em;
            z-index: 10;
        }

        #info span {
            font-weight: 600;
            text-transform: uppercase;
            font-size: 11px;
            opacity: 0.9;
        }

        #info .hint {
            display: block;
            margin-top: 4px;
            font-weight: 400;
            opacity: 0.95;
        }

        /* 🔄 OVERLAY DE CARGA */
        #loader-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at top, #432371 0%, #1c2541 35%, #050816 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.6s ease;
        }

        .loader-card {
            background: rgba(5, 8, 22, 0.88);
            border-radius: 18px;
            padding: 24px 28px 20px;
            box-shadow: 0 18px 45px rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.14);
            max-width: 360px;
            width: 86%;
            color: #fdfdfd;
            text-align: center;
        }

        .loader-title {
            font-size: 15px;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            opacity: 0.9;
            margin-bottom: 6px;
        }

        .loader-subtitle {
            font-size: 13px;
            opacity: 0.8;
            margin-bottom: 16px;
        }

        .loader-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
            margin-bottom: 8px;
        }

        .loader-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, #ff7a88, #ffd58a);
            transition: width 0.25s ease;
        }

        .loader-percent {
            font-size: 12px;
            letter-spacing: 0.06em;
            opacity: 0.9;
        }

                /* 📱 OVERLAY "GIRA EL TELÉFONO" */
        #rotate-overlay {
            position: fixed;
            inset: 0;
            background: rgba(5, 8, 22, 0.95);
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #ffffff;
            z-index: 9998;
            padding: 24px;
        }

        #rotate-overlay h2 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        #rotate-overlay p {
            font-size: 14px;
            opacity: 0.85;
        }

        /* 🎮 JOYSTICK PARA MÓVIL */
        #joystick {
            position: fixed;
            bottom: 32px;
            left: 32px;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 2px solid rgba(255, 255, 255, 0.2);
            display: none; /* solo se muestra en móvil */
            z-index: 15;
            touch-action: none;
        }

        #joystick-inner {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ffffff;
            left: 25px;
            top: 25px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.3);
        }

/* === Popup flotante para las historias de los cuadros === */

#gazePopup {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  max-width: min(720px, 94vw);

  padding: 18px 22px 14px;
  border-radius: 18px;

  /* Fondo sólido oscuro elegante */
  background: linear-gradient(
    135deg,
    rgba(20, 24, 48, 0.96),
    rgba(40, 24, 60, 0.94)
    );

  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fdfaf3;

  text-align: center;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: 0.01em;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(10px);

  display: none;
  z-index: 9999;
  pointer-events: none;

  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transform-origin: center bottom;
}

#gazePopup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* 🔹 Hacer el header de instrucciones un poco más pequeño en móvil */
  #info {
    top: 10px;
    padding: 6px 10px;
    max-width: 300px;
    font-size: 11px;   /* antes 13px */
  }

  #info span {
    font-size: 9px;    /* antes 11px */
  }

  #info .hint {
    font-size: 7px;   /* antes heredaba, ahora más chiquito */
  }

  /* 🔹 Popup de texto de los cuadros en móvil */
  #gazePopup {
    bottom: 18px;
    padding: 10px 12px 8px;
    border-radius: 14px;
    font-size: 0.6rem;
    max-width: 85vw;
  }
}