/* =========================================================================
 * v25 — Correcciones de interfaz. SOLO presentación: no toca el DOM, ni la
 * lógica del juego, ni el ranking. Se carga después del CSS principal y de
 * los estilos que ranking.js inyecta en runtime, por eso usa !important.
 *
 *  1) iOS en modo PWA (standalone): la barra superior quedaba debajo de la
 *     barra de estado del sistema porque .app mide 100svh y .topbar está en
 *     top:0. Se empuja todo el encabezado con env(safe-area-inset-top).
 *  2) El botón RANKING se montaba encima de "Inspeccionar" en Safari iOS.
 *     Se reubica sobre el joystick (lado izquierdo), lejos de la zona de
 *     acción, y se le pone un z-index por debajo de los paneles modales.
 * ========================================================================= */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* --- 1. Zona segura superior ------------------------------------------- */

/* Franja opaca detrás de la barra de estado, para que reloj y batería se lean
   sobre fondo sólido en lugar de sobre la escena 3D. */
.app::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sat);
  background: #0e1c17;
  z-index: 6;
  pointer-events: none;
}

.topbar {
  padding-top: calc(26px + var(--sat)) !important;
}
.hud {
  top: calc(126px + var(--sat)) !important;
}

/* Pantalla de menú / boletín de noticias */
.phase-menu .topbar {
  height: calc(73px + var(--sat)) !important;
  padding-top: calc(14px + var(--sat)) !important;
}
.news-intro {
  top: calc(73px + var(--sat)) !important;
}
.start-screen {
  top: calc(91px + var(--sat)) !important;
}

@media (height<=780px) and (width>=761px) {
  .topbar {
    padding-top: calc(19px + var(--sat)) !important;
  }
}

@media (width<=760px) {
  .topbar {
    padding-top: calc(7px + var(--sat)) !important;
  }
  .hud,
  .minimap {
    top: calc(41px + var(--sat)) !important;
  }
  .mission-tip {
    top: calc(88px + var(--sat)) !important;
  }
  .phase-menu .topbar {
    height: calc(65px + var(--sat)) !important;
    padding-top: calc(12px + var(--sat)) !important;
  }
  .news-intro {
    top: calc(65px + var(--sat)) !important;
  }
}

@media (width<=760px) and (height<=560px) {
  .hud,
  .minimap {
    top: calc(36px + var(--sat)) !important;
  }
  .mission-tip {
    top: calc(78px + var(--sat)) !important;
  }
}

@media (height<=500px) {
  .topbar {
    padding-top: calc(10px + var(--sat)) !important;
  }
  .hud {
    top: calc(67px + var(--sat)) !important;
  }
  .mission-tip {
    top: calc(163px + var(--sat)) !important;
  }
}

@media (height<=500px) and (orientation: landscape) {
  .phase-menu .topbar {
    height: calc(52px + var(--sat)) !important;
    padding-top: calc(8px + var(--sat)) !important;
  }
  .news-intro {
    top: calc(52px + var(--sat)) !important;
  }
}

/* Barra inferior por encima del indicador de inicio de iOS. */
footer {
  padding-bottom: var(--sab);
}

/* --- 2. Botón RANKING sin solapamientos -------------------------------- */

/* Retrato en móvil: encima del joystick, a la izquierda. El joystick mide
   100px y arranca en var(--sab)+22px, así que 138px deja aire suficiente
   incluso cuando Safari muestra su barra inferior. */
@media (width<=760px) {
  #rk-btn {
    left: calc(var(--sal) + 14px) !important;
    right: auto !important;
    bottom: calc(var(--sab) + 138px) !important;
    top: auto !important;
    z-index: 6 !important;
    padding: 7px 12px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    max-width: 118px !important;
  }
}

/* Pantallas muy bajas en retrato: el joystick baja de tamaño, el botón sube
   un poco menos para no chocar con el HUD. */
@media (width<=760px) and (height<=560px) {
  #rk-btn {
    bottom: calc(var(--sab) + 122px) !important;
  }
}

/* Apaisado en teléfono: arriba a la izquierda, bajo la barra de marca. */
@media (orientation: landscape) and (height<=500px) and (pointer: coarse) {
  #rk-btn {
    top: calc(var(--sat) + 58px) !important;
    bottom: auto !important;
    left: calc(var(--sal) + 14px) !important;
    right: auto !important;
    max-width: 90px !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
  }
}

/* -----------------------------------------------------------------------
 * Respaldo para Safari < 16.4, que no entiende la sintaxis de rango
 * `(width<=760px)` usada en el CSS principal y descarta esos bloques
 * enteros. Se repiten aquí las reglas críticas con la sintaxis clásica.
 * --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .topbar {
    padding-top: calc(7px + var(--sat)) !important;
  }
  .hud,
  .minimap {
    top: calc(41px + var(--sat)) !important;
  }
  .mission-tip {
    top: calc(88px + var(--sat)) !important;
  }
  .phase-menu .topbar {
    height: calc(65px + var(--sat)) !important;
    padding-top: calc(12px + var(--sat)) !important;
  }
  .news-intro {
    top: calc(65px + var(--sat)) !important;
  }
  #rk-btn {
    left: calc(var(--sal) + 14px) !important;
    right: auto !important;
    bottom: calc(var(--sab) + 138px) !important;
    top: auto !important;
    z-index: 6 !important;
    padding: 7px 12px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    max-width: 118px !important;
  }
}
@media (max-width: 760px) and (max-height: 560px) {
  .hud,
  .minimap {
    top: calc(36px + var(--sat)) !important;
  }
  .mission-tip {
    top: calc(78px + var(--sat)) !important;
  }
  #rk-btn {
    bottom: calc(var(--sab) + 122px) !important;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rk-btn {
    top: calc(var(--sat) + 58px) !important;
    bottom: auto !important;
    left: calc(var(--sal) + 14px) !important;
    right: auto !important;
    max-width: 90px !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
  }
}