/* ═══════════════════════════════════════════════════════════════
   PIXET · pixet-responsive.css                 [ OBLIGATORIO ]
   ───────────────────────────────────────────────────────────────
   SOLO @media y @container. Nada más.

   REGLA: si un selector NO empieza con @media o @container,
          NO va aquí → va en el <style> base del HTML.

   BREAKPOINTS:
     • Móvil horizontal:  altura ≤ 500px   → Redmi 10C 825×360
     • Móvil muy bajo:    altura ≤ 340px   → cinturón de seguridad
     • Tablet:            501–1024 ancho y > 500 alto → iPad
     • LG 32" LED:        1025–1599 ancho  → base, sin overrides
     • Lenovo LOQ FHD:    ≥ 1600 ancho     → base, sin overrides
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓ MÓVIL HORIZONTAL · altura ≤ 500px (Redmi 10C 825×360) ▓▓▓
   ═══════════════════════════════════════════════════════════════ */
@container pixet (max-height: 500px) {

  /* ── Header compacto ── */
  .brand-text { display: none; }
  .brand { padding: 3px 5px; }
  .instructions { font-size: .68rem; padding: 3px 6px; }
  .header-btn { min-width: 34px; min-height: 34px; padding: 3px 6px; font-size: .85rem; }
  .config-btn { min-width: 34px; min-height: 34px; font-size: 1rem; }
  .exit-btn { min-width: 90px; min-height: 40px; font-size: .78rem; padding: 4px 10px; letter-spacing: .4px; border-width: 2px; box-shadow: 0 3px 0 #7f1d1d, 0 0 16px rgba(239,68,68,.7); }
  .hero-badge { width: 22px; height: 22px; }
  .sim-toggle-btn { min-width: 32px; min-height: 32px; font-size: .95rem; }
  .sim-devices { padding: 2px 4px; gap: 2px; }
  .sim-devices .sim-dev-btn { width: 24px; height: 24px; font-size: .85rem; }

  /* ── Overlays del canvas: reposicionados ── */
  .ov-volume { top: 60px; left: 6px; }
  .ov-speed { top: 16px; left: 6px; }
  .ov-coins { top: 20px; gap: 3px; }
  .ov-elige { top: 16px; right: 6px; }
  .ov-dedos { top: 30px; right: 110px; }
  .ov-hand { top: 100px; right: 10px; }
  .ov-action { bottom: 34px; right: 6px; }
  .ov-tool-color { bottom: 74px; left: 6px; }
  .ov-tool-help { bottom: 34px; left: 6px; }

  .ov-volume .v-slider-wrap { width: 30px; height: auto; }
  .ov-speed .v-slider-wrap { width: 100px; height: auto; }
  .ov-action .stage-btn.yellow,
  .ov-tool-color .round-btn,
  .ov-tool-help .round-btn { width: 38px; height: 38px; font-size: 1rem; }

  /* ── Panel "Elige número" compacto ── */
  .ov-elige .elige-panel label { white-space: normal; text-align: center; line-height: 1.05; font-size: .62rem; letter-spacing: .2px; }
  .ov-elige .elige-panel label br { display: inline; }
  .ov-elige .elige-panel { padding: 5px 8px; gap: 3px; }
  .ov-elige .elige-row { gap: 4px; }
  .ov-elige .elige-row input { width: 42px; height: 42px; font-size: 1.1rem; }
  .ov-elige .ok-btn { width: 32px; height: 32px; }

  /* ─── 3 GRUPOS SEPARADOS (cofres · monedas · canjear) ─── */
  .ov-chests      { top: 15px; left: 30%; transform: translateX(-50%); flex-direction: row; align-items: center; }
  .ov-coin-count  { top: 34px; left: 52%; transform: translateX(-50%); flex-direction: row; align-items: center; }
  .ov-redeem      { top: 34px; left: 68%; transform: translateX(-50%); flex-direction: row; align-items: center; }


  /* ── Manos y cofres ── */
  .ov-hand .hand-photo { width: 110px; }
  .ov-coins { --coins-chest-w: 30px; --coins-chest-h: 36px; }
  .ov-dedos .dedos-pill { font-size: .78rem; padding: 4px 9px; }
  .skip-lens-btn { font-size: .95rem !important; min-width: 90px; min-height: 70px; padding: 0 10px !important; }

  /* ── Intro horizontal compacta ── */
  .intro-panel { padding: 6px; gap: 6px; }
  .intro-image-wrap { width: 20%; min-width: 55px; max-width: 100px; flex: 0 0 auto; }
  .intro-story { gap: 4px; }
  .intro-story-header { gap: 6px; }
  .intro-story-header h2 { font-size: .85rem; letter-spacing: 1px; }
  .intro-progress { gap: 3px; }
  .intro-progress .dot { width: 5px; height: 5px; }
  .intro-nav .header-btn { font-size: .7rem; padding: 2px 6px; min-height: 26px; min-width: 26px; }
  .intro-slide-inner { font-size: .85rem; line-height: 1.25; padding: 2px; }
  .intro-cta-row { padding-top: 2px; }
  .intro-cta-row .btn-start { min-height: 32px; min-width: 90px; font-size: .85rem; padding: 5px 14px; letter-spacing: 1px; box-shadow: 0 3px 0 #a16207; }

  /* ── Personalización horizontal compacta (FIX Redmi 10C) ── */
  .personalize-panel { flex-direction: row; padding: 6px; gap: 8px; align-items: stretch; }
  .personalize-avatar-wrap { width: 14%; min-width: 50px; max-width: 90px; flex: 0 0 auto; }
  .personalize-body { gap: 3px; padding: 0; overflow: hidden; }
  .pers-form { gap: 3px; padding: 0; max-width: none; margin: 0; }
  .pers-form h2 { font-size: .82rem; }
  .pers-q { font-size: .7rem; line-height: 1.1; }
  .name-row { gap: 4px; }
  .name-row input { padding: 4px 8px; font-size: .9rem; min-height: 32px; border-width: 2px; border-radius: 8px; }
  .mic-btn { padding: 4px 8px; font-size: .75rem; min-height: 32px; border-width: 2px; border-radius: 8px; box-shadow: 0 2px 0 #9a3412; }
  #genderMicBtn { font-size: .7rem; padding: 2px 8px; min-height: 26px; }
  .gender-row { gap: 4px; }
  .gender-btn { padding: 4px 8px; font-size: .75rem; min-height: 32px; gap: 4px; border-width: 2px; border-radius: 10px; }
  .gender-btn span { font-size: 1rem; }
  .pers-name-pill { font-size: .95rem; padding: 6px 16px; border-width: 2px; box-shadow: 0 2px 0 #a16207; }
  .pers-btn-row { gap: 6px; }
  .pers-btn-row .btn-start { max-width: 140px; font-size: .8rem; padding: 6px 12px; min-height: 34px; letter-spacing: .8px; box-shadow: 0 3px 0 #a16207; }
  .pers-btn-row .stage-btn.gray { max-width: 110px; font-size: .72rem; padding: 6px 8px; min-height: 34px; }
}


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓ CINTURÓN DE SEGURIDAD · altura ≤ 340px ▓▓▓
   ═══════════════════════════════════════════════════════════════ */
@container pixet (max-height: 340px) {
  .personalize-avatar-wrap { display: none; }
  .pers-form h2 { display: none; }
  .pers-q { font-size: .65rem; }
  .intro-image-wrap { display: none; }
  .intro-slide-inner { font-size: .78rem; }
}


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓ TABLET · 501–1024 ancho y > 500 alto (iPad 1024×768) ▓▓▓
   ═══════════════════════════════════════════════════════════════ */
@container pixet (min-width: 501px) and (max-width: 1024px) and (min-height: 501px) {
  .header-btn { min-width: 38px; min-height: 38px; padding: 4px 8px; font-size: .95rem; border-radius: 10px; }
  .config-btn { min-width: 38px; min-height: 38px; font-size: 1.1rem; padding: 4px 6px; border-width: 2px; box-shadow: 0 3px 0 #475569; }
  .exit-btn { min-width: 100px; min-height: 44px; padding: 6px 14px; font-size: .82rem; font-weight: 900; letter-spacing: .5px; border-width: 2px; box-shadow: 0 4px 0 #7f1d1d, 0 0 20px rgba(239,68,68,.75); }
  .brand { padding: 3px 7px; gap: 5px; border-width: 2px; }
  .hero-badge { width: 24px; height: 24px; font-size: .85rem; border-width: 2px; }
  .brand-text h1 { font-size: .8rem; }
  .brand-text p { font-size: .5rem; }
  .instructions { padding: 4px 8px; font-size: .72rem; }
  .sim-toggle-btn { min-width: 38px; min-height: 38px; font-size: 1.05rem; }
  .sim-devices { padding: 3px 6px; gap: 3px; }
  .sim-devices .sim-dev-btn { width: 28px; height: 28px; font-size: 1rem; }

  .ov-volume { top: 20px; left: 6px; }
  .ov-speed { top: 20px; left: 70px; }
  .ov-coins { top: 24px; gap: 4px; }
  .ov-elige { top: 20px; right: 6px; }
  .ov-dedos { top: 88px; right: 6px; }
  .ov-hand { top: 140px; right: 6px; }
  .ov-action { bottom: 40px; right: 6px; }
  .ov-tool-color { bottom: 90px; left: 6px; }
  .ov-tool-help { bottom: 40px; left: 6px; }

  .ov-volume .v-slider-wrap { width: 34px; height: auto; padding: 5px 3px; }
  .ov-speed .v-slider-wrap { width: 110px; height: auto; padding: 4px 8px; }
  .ov-action .stage-btn.yellow,
  .ov-tool-color .round-btn,
  .ov-tool-help .round-btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .ov-elige .elige-panel { padding: 6px 8px; gap: 4px; }
  .ov-elige .elige-row input { width: 48px; height: 48px; font-size: 1.2rem; }
  .ov-elige .ok-btn { width: 36px; height: 36px; }
  .ov-hand .hand-photo { width: 80px; padding: 4px; border-width: 2px; }
  .hand-label { font-size: .55rem; margin-top: 2px; letter-spacing: 0; }
  .ov-coins { --coins-chest-w: 32px; --coins-chest-h: 40px; }
  .ov-dedos .dedos-pill { font-size: .78rem; padding: 4px 9px; }
  .skip-lens-btn { font-size: 1.1rem !important; min-width: 110px; min-height: 80px; }

  .personalize-panel { padding: 6px; gap: 6px; flex-direction: row; align-items: stretch; }
  .personalize-avatar-wrap { width: 22%; min-width: 80px; max-width: 140px; }
  .intro-panel { padding: 8px; gap: 8px; }
  .intro-image-wrap { width: 30%; }
  .intro-slide-inner { font-size: clamp(0.85rem, 3.2vmin, 1.2rem); line-height: 1.3; }
  .intro-cta-row .btn-start { min-height: 42px; min-width: 110px; font-size: .9rem; padding: 8px 18px; }
  .intro-story-header h2 { font-size: clamp(.9rem, 2.2vmin, 1.4rem); }
  .intro-nav .header-btn { font-size: .75rem; padding: 4px 8px; min-height: 34px; min-width: 34px; }
}

/* (LG 32" y Lenovo LOQ usan el layout base sin overrides) */


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓ MEDIA QUERIES · estructura de página ▓▓▓
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px), (pointer: coarse) {
  html:not(.sim-on) { position: fixed; inset: 0; width: auto; height: auto; overflow: hidden; overscroll-behavior: none; }
  html:not(.sim-on) body { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; padding: 0; overflow: hidden; }
  html:not(.sim-on) .container {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: auto; height: auto; max-width: none; max-height: none;
    border-radius: 0; border-width: 0;
    padding: 4px;
    padding-top: calc(4px + env(safe-area-inset-top));
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    padding-left: calc(4px + env(safe-area-inset-left));
    padding-right: calc(4px + env(safe-area-inset-right));
    gap: 4px; box-shadow: none;
  }
}

@media (max-height: 720px) {
  .stat-pill { font-size: .8rem; padding: 4px 9px; }
  .stage-btn.gray { padding: 5px 10px; font-size: .75rem; min-height: 34px; }
  .hand-photo { width: clamp(55px, 75%, 80px); }
}

@media (max-width: 720px) {
  .intro-panel, .personalize-panel { flex-direction: column; padding: 8px; gap: 8px; }
  .intro-image-wrap, .personalize-avatar-wrap { width: 100%; flex: 0 0 30%; min-height: 0; }
  .intro-story, .personalize-body { flex: 1 1 auto; min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓ ROTACIÓN FORZADA · fallback JS ▓▓▓
   ═══════════════════════════════════════════════════════════════ */
body.rotated { overflow: hidden !important; }
body.rotated .container { position: fixed !important; top: 0 !important; left: 100vw !important; right: auto !important; bottom: auto !important; width: 100vh !important; height: 100vw !important; max-width: none !important; max-height: none !important; transform-origin: left top !important; transform: rotate(90deg) !important; border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important; padding: 4px !important; padding-top: calc(4px + env(safe-area-inset-right)) !important; padding-bottom: calc(4px + env(safe-area-inset-left)) !important; padding-left: calc(4px + env(safe-area-inset-top)) !important; padding-right: calc(4px + env(safe-area-inset-bottom)) !important; gap: 4px !important; }
body.rotated .overlay.active:not(.tap-start-overlay) { transform: rotate(90deg) !important; transform-origin: left top !important; left: 100vw !important; top: 0 !important; right: auto !important; bottom: auto !important; width: 100vh !important; height: 100vw !important; inset: auto !important; }
body.rotated .sim-viewport { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; }