/* ===================================================
   MATH BATTLE v2.1 — style.css
   Mejoras: fuente Nunito sustituida por sistema +
   Google Fonts fallback, loading screen animada,
   mejor soporte PWA y dispositivos táctiles
=================================================== */

/* ── Reset ── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;              /* sin scroll — Phaser lo maneja */
}

/* ── Tipografía ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap');

body {
  font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: #000010;
  color: #ffffff;
  text-align: center;
  /* Evita selección accidental en juego */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Contenedor del juego ── */
#game {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; height: 100vh;
  background: radial-gradient(ellipse at center, #0d0a2e 0%, #000010 70%);
}

canvas {
  display: block;
  touch-action: none;           /* gestos Phaser sin interferencia */
  image-rendering: -webkit-optimize-contrast; /* texto más nítido en Retina */
  image-rendering: crisp-edges;
}

/* ── PANTALLA DE CARGA ── */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #0d0a2e 0%, #000010 70%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity .5s ease;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-sub {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
}

/* Spinner animado */
.loading-spinner {
  width: 52px; height: 52px;
  border: 4px solid rgba(245,158,11,.2);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* Barra de progreso */
.loading-bar-bg {
  width: 280px; height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #f59e0b);
  border-radius: 4px;
  animation: loadBar 1.8s ease-in-out infinite;
}

@keyframes loadBar {
  0%   { width: 0%; }
  60%  { width: 85%; }
  100% { width: 100%; }
}

/* ── ANIMACIONES GLOBALES ── */
@keyframes pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 20px rgba(245,158,11,.4); }
  50%       { opacity: .8; text-shadow: 0 0 40px rgba(245,158,11,.8); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVO ── */
/* Safe area para iPhone con notch */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
}

/* Aviso de rotar en portrait estrecho */
@media (orientation: portrait) and (max-height: 500px) {
  #rotate-hint {
    display: flex !important;
  }
}

#rotate-hint {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.92);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  font-family: 'Nunito', sans-serif;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 24px;
}

#rotate-hint .rotate-icon {
  font-size: 52px;
  animation: spin 2s linear infinite;
}

/* ── PWA (instalada) ── */
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  #loading-screen { padding-top: env(safe-area-inset-top); }
}

/* ── SCROLLBAR personalizada (para escenas con scroll) ── */
::-webkit-scrollbar             { width: 6px; }
::-webkit-scrollbar-track       { background: #0d0a2e; }
::-webkit-scrollbar-thumb       { background: #7c3aed; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a855f7; }

/* ── UTILS ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border:0;
}