* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0b0b12;
  color: #cfd2dc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Ocupa la ventana entera respetando notch / isla dinámica / barra de gestos.
   100dvh evita el salto cuando iOS oculta la barra de direcciones. */
#wrap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

/* La zona donde vive el lienzo. JS la mide y elige la escala. */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #5c94fc;
  outline: 2px solid #23242e;
  box-shadow: 0 0 0 1px #000, 0 18px 46px rgba(0, 0, 0, .55);
  touch-action: none;
}

#help {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(10px, 1.1vw, 13px);
  line-height: 1.7;
  text-align: center;
  color: #7c8091;
}

#help b { color: #b9bdca; }

/* ------------------------------- mando táctil ------------------------------- */

#pad {
  display: none;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.dpad, .acts {
  display: flex;
  gap: var(--gap, 12px);
  align-items: center;
  flex: 0 0 auto;
}

.btn {
  font: inherit;
  font-size: clamp(16px, 4.5vw, 24px);
  font-weight: 700;
  color: #e7e9f0;
  background: #22242f;
  border: 2px solid #3a3d4d;
  border-radius: 14px;
  width: var(--btn, 62px);
  height: var(--btn, 62px);
  padding: 0;
  touch-action: none;
  transition: background .05s linear, transform .05s linear;
}

.btn.round { border-radius: 50%; }
.btn.a { background: #4a1f2c; border-color: #7a3247; width: calc(var(--btn, 62px) * 1.22); height: calc(var(--btn, 62px) * 1.22); }
.btn.b { background: #2b2340; border-color: #4b3d6b; }
.btn.on { background: #5a5f78; transform: translateY(2px); }

/* En cuanto el puntero es grueso (móvil/tablet) aparece el mando y sobra la ayuda. */
@media (pointer: coarse) {
  #pad { display: flex; min-width: 0; }
  #help { display: none; }
  #wrap { gap: 8px; }
}

/* VERTICAL: el mando ocupa la franja de abajo, al alcance de los pulgares.
   Sin margen lateral, para que el lienzo aproveche todo el ancho.
   El tamaño de botón sale de la cuenta 5,22·btn + 3·gap <= ancho disponible,
   que es justo lo que antes se pasaba y recortaba el botón A. */
@media (pointer: coarse) and (orientation: portrait) {
  #wrap {
    --btn: clamp(46px, 14.5vw, 76px);
    --gap: clamp(6px, 2vw, 14px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  #pad {
    padding: clamp(10px, 4vh, 46px) clamp(6px, 3vw, 30px);
    align-items: center;
  }
  /* El lienzo (casi cuadrado) nunca llena una pantalla alargada. Se ancla
     arriba para que el hueco sobrante quede entre el juego y los botones,
     en lugar de repartirse por encima y por debajo. */
  #stage {
    align-items: flex-start;
    padding-top: clamp(6px, 2vh, 32px);
  }
}

/* HORIZONTAL: el mando pasa a ser dos columnas a los lados del lienzo
   (display:contents saca .dpad y .acts al flex de #wrap). Así los botones
   nunca se superponen al escenario, que es donde está el suelo. */
@media (pointer: coarse) and (orientation: landscape) {
  #wrap {
    --btn: clamp(44px, 10.5vh, 72px);
    --gap: clamp(6px, 1.5vh, 12px);
    flex-direction: row;
    align-items: center;
    gap: clamp(6px, 1.5vw, 16px);
  }
  #pad { display: contents; }
  /* align-self:stretch es obligatorio: con align-items:center la altura de
     #stage la marcaría su contenido, y como JS dimensiona el lienzo a partir
     de esa altura se realimentan y el lienzo colapsa a escala 1. */
  #stage { order: 1; align-self: stretch; min-width: 0; }
  .acts { order: 2; }
}