/* El Tesoro de las Tablas — v0.3.1
   Composición de cada pantalla y adaptación a los distintos tamaños.
   Móvil primero: lo de aquí arriba es la versión de teléfono. */

.pantalla {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  z-index: var(--z-hud);
}

/* Decorado ---------------------------------------------------------------- */

/* Nubes arriba y olas al pie, detrás de todo y sin capturar ni un toque. Es lo
   único de la pantalla que no significa nada: está para que el mar parezca un
   mar y no un degradado. */
.decorado {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-fondo);
}

.nube {
  position: absolute;
  fill: #ffffff;
}

.nube-1 {
  top: 4%;
  left: 4%;
  width: 8rem;
  opacity: 0.18;
}

.nube-2 {
  top: 9%;
  right: 8%;
  width: 6rem;
  opacity: 0.14;
}

/* Cada ola es el mismo perfil dibujado dos veces seguidas dentro de un SVG del
   doble de ancho: desplazarlo media anchura lo deja exactamente donde estaba, y
   el bucle no tiene costura. */
.ola {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 5rem;
}

.ola-1 {
  fill: rgba(255, 255, 255, 0.07);
}

.ola-2 {
  bottom: 1.25rem;
  height: 3.5rem;
  fill: rgba(255, 255, 255, 0.05);
}

/* ¿Quién juega? ---------------------------------------------------------- */

/* Dos por fila en el teléfono: con un máximo de cuatro jugadores caben todos
   sin desplazar la pantalla.

   El ancho está topado y la rejilla centrada: sin el tope, en un portátil las
   fichas se estiraban hasta 400 px y quedaban dos rectángulos enormes con una
   cara diminuta en medio. Es un máximo, no un ancho fijo, así que en el móvil
   la rejilla sigue ocupando lo que hay. */
.lista-perfiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  margin-top: var(--e5);
  max-width: 22rem;
  margin-inline: auto;
}

/* Mapa ------------------------------------------------------------------- */

.botin-total {
  display: flex;
  justify-content: center;
  gap: var(--e4);
  margin-top: var(--e3);
  font-family: var(--tipo-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--oro-claro);
}

.dato-estrellas {
  color: var(--arena);
}

/* La ruta se dibuja detrás de las islas, en el mismo cuadro: por eso la zona
   es el contexto de posición y la rejilla no lleva fondo propio. */
.zona-mapa {
  position: relative;
}

/* `preserveAspectRatio="none"` estira el trazado hasta hacerlo coincidir con
   la rejilla, sea cual sea la proporción de la pantalla. Eso deformaría el
   grosor y los guiones; `non-scaling-stroke` es lo que los deja intactos. */
.ruta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ruta path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  vector-effect: non-scaling-stroke;
}

.mapa-islas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3) var(--e2);
}

/* Fin -------------------------------------------------------------------- */

.resultado {
  margin: var(--e5) 0 var(--e3);
  font-family: var(--tipo-titulo);
  font-size: clamp(2.75rem, 15vw, 4rem);
  font-weight: 700;
  color: var(--oro-claro);
  text-shadow: var(--sombra-texto);
}

.detalle {
  display: flex;
  justify-content: center;
  gap: var(--e5);
  font-family: var(--tipo-titulo);
  font-size: 1.2rem;
  font-weight: 600;
}

.acierto {
  color: var(--selva-clara);
}

.fallo {
  color: var(--coral);
}

.racha-texto {
  color: var(--arena);
}

.botin-partida {
  margin: var(--e4) 0 var(--e2);
  font-family: var(--tipo-titulo);
  font-size: clamp(1.5rem, 8vw, 2rem);
  font-weight: 700;
}

.aviso {
  margin-bottom: var(--e2);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--arena);
}

/* Tienda ----------------------------------------------------------------- */

/* Tres por fila, como las islas: seis artículos por pestaña caben en dos filas
   sin desplazar la pantalla. */
.rejilla-tienda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* Tablet y pantallas medianas -------------------------------------------- */

@media (min-width: 40rem) {
  .pantalla {
    max-width: 36rem;
  }

  .hud {
    font-size: 1.15rem;
  }

  .estrella {
    width: 1.35rem;
    height: 1.35rem;
  }

  .nube-1 {
    width: 11rem;
  }

  .nube-2 {
    width: 8rem;
  }
}

/* Escritorio: el juego no crece más, se queda centrado y cómodo. */
@media (min-width: 64rem) {
  .pantalla {
    max-width: 40rem;
  }

  .respuesta {
    min-height: 5.5rem;
  }
}

/* Móvil apaisado: hay poca altura, así que se comprime todo y se deja
   desplazar en vez de centrar verticalmente. */
@media (max-height: 34rem) and (orientation: landscape) {
  body {
    justify-content: flex-start;
    padding: var(--e2);
  }

  .pantalla {
    max-width: 44rem;
  }

  .operacion {
    margin: var(--e3) auto;
    padding: var(--e3) var(--e5);
    font-size: 2.25rem;
  }

  .subtitulo {
    margin: var(--e2) 0 var(--e3);
  }

  .barra-tiempo {
    margin: var(--e2) 0;
  }

  .respuesta {
    min-height: 3.25rem;
  }

  /* Con cinco columnas la ruta serpenteante ya no cuadra con la rejilla: en
     apaisado se retira en vez de cruzar las islas por donde no toca. */
  .mapa-islas {
    grid-template-columns: repeat(5, 1fr);
  }

  .ruta {
    display: none;
  }

  .lista-perfiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e3);
    margin-top: var(--e3);
    max-width: 38rem;
  }

  .cara-perfil {
    min-height: 6rem;
  }

  .selector-nivel {
    margin-bottom: var(--e2);
  }

  .nivel {
    min-height: 2.25rem;
    padding: var(--e1) var(--e3);
    font-size: 0.9rem;
  }

  /* La ayuda es larga: en apaisado se aprovecha el ancho y se lee scrolleando
     dentro del panel, no moviendo la página. */
  .capa-ayuda {
    padding: var(--e2);
  }

  .panel-ayuda {
    max-width: 40rem;
    padding: var(--e4);
  }

  .ayuda-bloque {
    margin-bottom: var(--e3);
  }

  .estrellas-grandes,
  .resultado {
    margin: var(--e3) 0;
  }

  .estrellas-grandes .estrella {
    width: 2.25rem;
    height: 2.25rem;
  }

  .boton-grande {
    min-height: 3rem;
    margin-top: var(--e2);
  }

  .senda {
    height: 3rem;
  }

  .decorado {
    display: none;
  }
}