/* Reglas base de la app (columna fija, barra de carga, recuadros de espera…). Sale de views/layout_head.php (2026-10-23). */
  /* La app es una columna fija: nada la puede ensanchar ni deslizarla de lado (iPhone, 2026-10-07). */
  /* Sin deslizarse de lado. OJO: overflow-x:hidden en html y body vuelve scroll-container al body y ROMPE los elementos pegajosos
     (el menú lateral y los encabezados dejaban de pegarse al hacer scroll, 2026-10-08). `clip` recorta igual sin crear contenedor. */
  /* Sin rebote al jalar en los bordes (iPhone, 2026-10-10): la pantalla no se arrastra con el dedo; el desplazamiento normal sigue igual. */
  html, body { overscroll-behavior: none; }
  html, body { overflow-x: hidden; max-width: 100%; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  body { font-family: 'Lexend', sans-serif; }
  /* Doble toque = zoom + salto de pantalla en iPhone/iPad (2026-10-09). `manipulation` deja tocar y deslizar normal, quita el zoom de doble toque
     (el pellizco para agrandar sigue funcionando) y el retraso de 300 ms. Los efectos «hover» se quedan pegados tras un toque: solo con ratón. */
  html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
  a, button, [role="button"], label, select, input, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  @media (hover: none) { .hover\:scale-\[0\.98\]:hover { transform: none; } }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .glass-effect { background: rgba(246,250,250,0.8); backdrop-filter: blur(24px); }
  .bento-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
  @media (max-width: 768px) { .bento-grid { grid-template-columns: 1fr; } }
  .circular-timer-svg { transform: rotate(-90deg); }
  .timer-path-bg { fill: none; stroke: #e1eaea; stroke-width: 8; }
  .timer-path-active { fill: none; stroke: #326769; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; } /* ui-reglas: ok — el aro del temporizador avanza 1 s por segundo: es el dato, no decoración */
  .confetti-piece { position: absolute; width: 12px; height: 12px; border-radius: 3px; }

  /* Barra de carga, aviso sin internet y recuadros de espera (reglas 3 y 9). Movimientos de 150 a 300 ms (regla 10). */
  #barra-carga { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #326769; z-index: 500; opacity: 0; transition: width 300ms ease-out, opacity 200ms; pointer-events: none; }
  #aviso-sin-red { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 400; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #2a3435; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: 15px; }
  #aviso-sin-red button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #164f51; font-weight: 700; font-size: 15px; cursor: pointer; }
  .skel { background-color: #e1eaea; animation: skelPulso 1.2s ease-in-out infinite; }
  @keyframes skelPulso { 50% { background-color: #edf3f3; } }
  @media (prefers-reduced-motion: reduce) { .skel, #barra-carga { animation: none; transition: none; } }
  /* Page transitions */
  #app-content { animation: fadeIn 250ms ease-out; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* Cofre nuevo de los juegos (2026-10-30): entra con un pequeño salto de 250 ms; sin animación si el aparato pide menos movimiento. */
@keyframes cofrePop{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
.cofre-img{animation:cofrePop .25s ease-out both;display:block;margin:0 auto}
@media (prefers-reduced-motion:reduce){.cofre-img{animation:none}}