/* Unicornio Mágico v1.1 — contenedor del juego */

.unimag-envoltura {
  width: 100%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #efe4ff 0%, #ffe6f3 100%);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(122, 79, 181, 0.22);
}

/* El div padre DEBE tener alto real, si no el escalador de Phaser
   calcula un lienzo diminuto. El aspect-ratio se inyecta desde PHP. */
.unimag-lienzo {
  position: relative;
  width: 100%;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #9b8cd8;
  touch-action: none;               /* sin zoom/scroll al arrastrar */
  -webkit-tap-highlight-color: transparent;
}

/* Sin !important: dejamos que Phaser controle el tamaño del canvas. */
.unimag-lienzo canvas {
  display: block;
  border-radius: 16px;
}

/* Respaldo para navegadores viejos sin aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
  .unimag-lienzo { min-height: 460px; }
}

.unimag-aviso {
  padding: 20px;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  color: #6b4b9a;
}

/* En móvil el juego ocupa todo el ancho de la pantalla */
@media (max-width: 700px) {
  .unimag-envoltura {
    margin: 10px 0;
    padding: 4px;
    border-radius: 14px;
    max-width: 100%;
  }
  .unimag-lienzo { border-radius: 12px; }
  @supports not (aspect-ratio: 16 / 10) {
    .unimag-lienzo { min-height: 420px; }
  }
}

/* ---------- PANTALLA COMPLETA ----------
   En fullscreen hay que anular el aspect-ratio y el ancho fijo, si no
   el lienzo queda chico a un lado y el resto en negro. */
.unimag-lienzo:fullscreen,
.unimag-lienzo:-webkit-full-screen,
.unimag-lienzo:-moz-full-screen,
.unimag-lienzo:-ms-fullscreen {
  aspect-ratio: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #8f7fd4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.unimag-lienzo:fullscreen canvas,
.unimag-lienzo:-webkit-full-screen canvas,
.unimag-lienzo:-moz-full-screen canvas,
.unimag-lienzo:-ms-fullscreen canvas {
  border-radius: 0 !important;
  margin: auto !important;
  display: block !important;
}

/* Si el navegador pone en fullscreen la envoltura en vez del lienzo */
.unimag-envoltura:fullscreen,
.unimag-envoltura:-webkit-full-screen {
  max-width: none !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #8f7fd4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.unimag-envoltura:fullscreen .unimag-lienzo,
.unimag-envoltura:-webkit-full-screen .unimag-lienzo {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}