/* ============================================================================
   FINX EL ZORRO · estilo.css
   Poco CSS a propósito: casi todo el juego se dibuja en el canvas.
   Lo de aquí es: que la página no se mueva, y los botones de la tablet.
   ========================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;   /* sin el flash azul al tocar */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; }

html, body {
  width: 100%; height: 100%;
  background: #05030E;
  overflow: hidden;                              /* la página NUNCA se desliza */
  overscroll-behavior: none;
  touch-action: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body { display: flex; align-items: center; justify-content: center; }

#escena {
  position: relative;
  width: 960px; height: 540px;                   /* juego.js lo recalcula */
  max-width: 100vw; max-height: 100vh;
}

#lienzo {
  display: block;
  width: 100%; height: 100%;
  image-rendering: auto;
  background: #0A0618;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ mandos */
#mandos {
  position: absolute; inset: 0;
  pointer-events: none;                          /* solo los botones reciben toques */
  display: none;                                 /* se prende al empezar a jugar */
}

#mandos .izquierda { position: absolute; left: 2.2%; bottom: 4%; display: flex; gap: 2.2vmin; }
#mandos .derecha   { position: absolute; right: 2.2%; bottom: 4%; }

.boton-tactil {
  pointer-events: auto;
  width: 13vmin; height: 13vmin;
  min-width: 64px; min-height: 64px;
  max-width: 108px; max-height: 108px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 5.2vmin;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(120, 90, 190, 0.30);
  border: 3px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
  transition: transform 0.06s, background 0.06s;
}

.boton-tactil.salto {
  width: 16vmin; height: 16vmin;
  min-width: 82px; min-height: 82px;
  max-width: 132px; max-height: 132px;
  background: rgba(240, 150, 60, 0.32);
  border-color: rgba(255, 220, 160, 0.55);
}

/* respuesta al dedo: se hunde. Sin esto el botón se siente "muerto". */
.boton-tactil.apretado {
  transform: scale(0.90);
  background: rgba(255, 255, 255, 0.45);
}

/* -------------------------------------------------- aviso de girar la tablet */
#gira {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: #0A0618;
  color: #D9CCF2;
  text-align: center; font-size: 22px; line-height: 1.5;
  z-index: 50;
}
#gira .gira-icono { font-size: 64px; animation: girando 1.8s ease-in-out infinite; }
@keyframes girando { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }

/* Solo en celulares/tablets angostos y parados */
@media (orientation: portrait) and (max-width: 900px) {
  #gira { display: flex; }
}