/* Piscis · menú arcade sobre un mar visto a través del cristal de un acuario.
   Solo se animan transform y opacity (las capas se componen en GPU). */

/* Piscis Pixel: Press Start 2P con las mayúsculas con tilde a altura completa (OFL, ver fonts/OFL-PiscisPixel.txt).
   Es la letra de todo Piscis: menú, juego y pantallas de Flutter. `block` y no `swap`: con `swap` la web pintaba el
   menú con la letra de reserva y lo cambiaba al llegar la fuente (el usuario lo vio el 2026-10-18); así el texto
   espera (invisible unos ms; la fuente va precargada desde index.html y con caché larga en el CDN). */
@font-face {
  font-family: 'Piscis Pixel';
  src: url('fonts/PiscisPixel.ttf') format('truetype');
  font-display: block;
}

:root {
  --abismo: #04122B;
  --marino: #0A2A5E;
  --profundo: #061A3D;
  --superficie: #0B3A75;
  --turquesa: #19C3D6;
  --neon: #FF3EA5;
  --amarillo: #FFD23F;
  --amarillo-sombra: #B8901A;
  --alga: #3DDC84;
  --texto: #DDF6FF;
  --texto-suave: #9CC9E0;
  --pixel: 'Piscis Pixel', ui-monospace, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --agua: cubic-bezier(.2, .9, .25, 1.12);
  /* Lo que tapan las barras del sistema y la muesca (en el navegador) */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-derecha: env(safe-area-inset-right, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izquierda: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}
/* En la app, la página ya va dentro del área segura (el SafeArea de Flutter). Sumar env() otra vez dejaba en
   el Realme C11 (WebView 155) la barra de estado contada dos veces: el nombre, las conchas y las perlas, más
   abajo de la cuenta (y, tras la tienda o el ranking, también la barra de navegación) */
.modo-app {
  --seguro-arriba: 0px;
  --seguro-derecha: 0px;
  --seguro-abajo: 0px;
  --seguro-izquierda: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--abismo);
  color: var(--texto);
  font-family: var(--pixel);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

a { color: var(--turquesa); text-decoration: none; }
a:focus-visible { color: var(--amarillo); }
/* Al pasar por encima, solo con ratón: en el móvil, el enlace tocado se quedaba en amarillo al volver del navegador
   (2026-10-25, la novena ronda en el emulador: ELIMINAR CUENTA) */
@media (hover: hover) { a:hover { color: var(--amarillo); } }

/* ---------- El mar ---------- */
.mar {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(64, 160, 220, .35) 0%, transparent 60%),
    linear-gradient(180deg, var(--superficie) 0%, var(--marino) 32%, var(--profundo) 68%, var(--abismo) 100%);
  overflow: hidden;
}

/* Rayos de luz que bajan de la superficie y se mecen */
.mar__rayos {
  position: absolute;
  inset: -20% -30% 25% -30%;
  background: repeating-linear-gradient(100deg,
      transparent 0 7%,
      rgba(150, 225, 255, .07) 9%,
      transparent 12% 18%,
      rgba(150, 225, 255, .045) 21%,
      transparent 24% 31%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  transform-origin: 50% 0;
  animation: mecer 14s ease-in-out infinite alternate;
}

/* Manchas de luz difusa (cáusticas tenues) */
.mar__luz {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 220, 255, .16) 0%, rgba(130, 220, 255, .05) 45%, transparent 70%);
  mix-blend-mode: screen;
}
.mar__luz--1 { width: 70vmax; height: 46vmax; left: -15vmax; top: -10vmax; animation: luz1 27s ease-in-out infinite alternate; }
.mar__luz--2 { width: 55vmax; height: 38vmax; right: -18vmax; top: 6vmax; animation: luz2 33s ease-in-out infinite alternate; }
.mar__luz--3 { width: 60vmax; height: 30vmax; left: 10vmax; bottom: -16vmax; opacity: .55; animation: luz1 41s ease-in-out infinite alternate-reverse; }

@keyframes mecer {
  from { transform: skewX(-4deg) translateX(-2%); }
  to   { transform: skewX(5deg) translateX(3%); }
}
@keyframes luz1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 6vmax, 0) scale(1.18); }
}
@keyframes luz2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-12vmax, 9vmax, 0) scale(.92); }
}

#burbujas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- El cristal ---------- */
.cristal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Huellas y cal muy tenues: el cristal de verdad nunca está perfecto */
.cristal__manchas {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(9vmin 6vmin at 18% 72%, rgba(255, 255, 255, .028), transparent 70%),
    radial-gradient(5vmin 7vmin at 23% 76%, rgba(255, 255, 255, .02), transparent 70%),
    radial-gradient(14vmin 9vmin at 82% 22%, rgba(255, 255, 255, .022), transparent 70%),
    radial-gradient(40vmin 3vmin at 50% 97%, rgba(200, 240, 255, .035), transparent 70%);
}

.cristal__reflejo {
  position: absolute;
  top: -25%;
  height: 150%;
  mix-blend-mode: screen;
  will-change: transform;
}
.cristal__reflejo--a {
  left: -55%;
  width: 75%;
  background: linear-gradient(100deg,
      transparent 0%, rgba(255, 255, 255, .025) 30%,
      rgba(255, 255, 255, .085) 47%, rgba(255, 255, 255, .03) 55%,
      transparent 75%);
  transform: rotate(9deg);
  animation: reflejoA 38s ease-in-out infinite alternate;
}
.cristal__reflejo--b {
  left: 45%;
  width: 22%;
  background: linear-gradient(100deg,
      transparent 0%, rgba(210, 245, 255, .06) 40%,
      rgba(210, 245, 255, .1) 50%, transparent 70%);
  transform: rotate(9deg);
  animation: reflejoB 52s ease-in-out infinite alternate;
}
/* Brillo especular que cruza el cristal de vez en cuando */
.cristal__destello {
  position: absolute;
  top: -30%;
  left: 0;
  width: 9%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-30vw) rotate(9deg);
  opacity: 0;
  animation: destello 15s ease-in-out 4s infinite;
}
.cristal__marco {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0, 6, 20, .55) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(160, 230, 255, .08),
    inset 0 0 90px rgba(0, 10, 30, .55);
}

@keyframes reflejoA {
  from { transform: translateX(0) rotate(9deg); }
  to   { transform: translateX(42vw) rotate(9deg); }
}
@keyframes reflejoB {
  from { transform: translateX(0) rotate(9deg); }
  to   { transform: translateX(-38vw) rotate(9deg); }
}
@keyframes destello {
  0%, 72%  { transform: translateX(-30vw) rotate(9deg); opacity: 0; }
  76%      { opacity: 1; }
  92%      { opacity: .8; }
  100%     { transform: translateX(130vw) rotate(9deg); opacity: 0; }
}

/* Líneas de recreativa, muy sutiles */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  opacity: .28;
}

/* ---------- Interfaz ---------- */
.pantalla {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2.2vh;
  padding:
    calc(var(--seguro-arriba) + 18px)
    calc(var(--seguro-derecha) + 16px)
    calc(var(--seguro-abajo) + 14px)
    calc(var(--seguro-izquierda) + 16px);
}

.hud {
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 1.6em;
  font-size: clamp(.55rem, 2.6vw, .8rem);
  visibility: hidden;
}
/* En el PC y las tabletas, la barra de arriba y PRÓXIMAMENTE crecen como la interfaz del juego (--ui-zoom
   lo pone main.js; en el móvil, 1). El resto de la portada ya crece con la pantalla. */
.hud, .proximamente__panel { zoom: var(--ui-zoom, 1); }
/* Recorta solo a lo ancho: arriba deja salir el acento de un nick con Á o Ñ (en Piscis Pixel va en el interlineado) */
.hud__jugador { color: var(--turquesa); text-shadow: 0 0 8px rgba(25, 195, 214, .6); overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.hud__monedas { display: inline-flex; align-items: center; gap: 1.4em; }
.hud__conchas { color: var(--amarillo); display: inline-flex; align-items: center; gap: .6em; text-shadow: 0 0 8px rgba(255, 210, 63, .45); }
.hud__perlas { color: #f3e9f7; display: inline-flex; align-items: center; gap: .6em; text-shadow: 0 0 8px rgba(243, 233, 247, .45); }
.perla {
  width: .9em;
  height: .9em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #e9dcf3 32%, #b9a3cf 78%);
  box-shadow: 0 0 6px rgba(243, 233, 247, .55);
}
.concha {
  width: 1.2em;
  height: 1em;
  background: radial-gradient(circle at 50% 100%, var(--amarillo) 0 55%, transparent 56%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 3px);
  mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 3px);
}

.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(3.4vh, 26px);
  text-align: center;
}

.titulo {
  margin: 0;
  font-size: min(13vw, 11vh, 4.6rem);
  letter-spacing: .06em;
  color: #E9FDFF;
  text-shadow:
    0 0 6px var(--turquesa),
    0 0 18px rgba(25, 195, 214, .7),
    0 0 44px rgba(25, 195, 214, .45),
    .09em .09em 0 var(--marino);
}
.titulo span {
  display: inline-block;
  animation: flotar 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.42s);
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.14em); }
}

.subtitulo {
  margin: 0;
  font-size: clamp(.5rem, 2.4vw, .75rem);
  color: var(--amarillo);
  letter-spacing: .14em;
  text-shadow: 0 0 10px rgba(255, 210, 63, .45);
}

.menu ul {
  list-style: none;
  margin: min(2vh, 14px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: min(2.6vh, 20px);
}
.menu__opcion {
  position: relative;
  font: inherit;
  font-size: min(4.6vw, 4.2vh, 1.35rem);
  color: #BFE6F5;
  background: none;
  border: 0;
  padding: .55em 1.6em;
  cursor: pointer;
  letter-spacing: .04em;
  text-shadow: .1em .1em 0 rgba(4, 18, 43, .85);
  transition: color .15s, transform .25s var(--agua);
}
.menu__opcion::before {
  content: '▶';
  position: absolute;
  left: .2em;
  visibility: hidden;
  color: var(--amarillo);
}
.menu__opcion.activa {
  color: var(--amarillo);
  transform: scale(1.06);
  text-shadow: 0 0 10px rgba(255, 210, 63, .65), .1em .1em 0 rgba(4, 18, 43, .9);
}
.menu__opcion.activa::before {
  visibility: visible;
  animation: parpadeo 1s steps(1) infinite;
}
.menu__opcion:focus-visible { outline: 2px dashed var(--turquesa); outline-offset: 4px; }
/* «Nº215» junto a RANKING (2.6a.4): tu último puesto, en turquesa y pequeño. Fuera del flujo: RANKING
   sigue centrado como las otras dos */
.menu__puesto {
  position: absolute;
  left: calc(100% - 1.2em);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--turquesa);
  text-shadow: 0 0 6px rgba(25, 195, 214, .55);
  white-space: nowrap;
}
.menu__opcion.glitch { animation: glitch .32s steps(2) 1; }
/* Elegida, con destino (2026-10-23): el temblor y luego un parpadeo de recreativa, como al pulsar START, mientras el
   menú espera sus 2 s antes de abrirlo (main.js, ESPERA_ELEGIR_MS) */
.menu__opcion.elegida { animation: glitch .32s steps(2) 1, elegida .16s steps(1) .32s 8; }
@keyframes elegida {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .25; }
}
@keyframes glitch {
  0%   { transform: translate(2px, -1px) scale(1.06); text-shadow: -3px 0 var(--neon), 3px 0 var(--turquesa); }
  33%  { transform: translate(-3px, 1px) scale(1.08); text-shadow: 3px 0 var(--neon), -3px 0 var(--turquesa); }
  66%  { transform: translate(1px, 2px) scale(1.05); text-shadow: -2px 0 var(--neon), 2px 0 var(--turquesa); }
  100% { transform: scale(1.06); }
}

.parpadeo {
  margin: 0;
  font-size: clamp(.45rem, 2.1vw, .65rem);
  color: var(--texto-suave);
  letter-spacing: .12em;
  animation: parpadeo 1.15s steps(1) infinite;
}
@keyframes parpadeo {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* ---------- Descarga (solo web) ---------- */
.descarga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  text-align: center;
}
.boton-arcade {
  display: inline-block;
  font-size: clamp(.6rem, 3vw, .85rem);
  padding: 1em 1.4em;
  color: var(--abismo);
  background: var(--amarillo);
  border: 3px solid #FFF1B0;
  box-shadow: 0 6px 0 var(--amarillo-sombra), 0 0 26px rgba(255, 210, 63, .35);
  transition: transform .08s, box-shadow .08s;
}
.boton-arcade:hover, .boton-arcade:focus-visible { color: var(--abismo); filter: brightness(1.06); }
.boton-arcade:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--amarillo-sombra), 0 0 18px rgba(255, 210, 63, .3); }
.descarga__version {
  margin: 0;
  min-height: 1em;
  font-size: clamp(.45rem, 2vw, .6rem);
  color: var(--turquesa);
}
.descarga__nota {
  margin: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: auto;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

/* ---------- Pie ---------- */
.pie {
  font-size: clamp(.42rem, 1.9vw, .55rem);
  color: var(--texto-suave);
  letter-spacing: .06em;
  display: flex;
  justify-content: center;
}
.pie__web, .pie__app { display: inline-flex; flex-wrap: wrap; gap: .8em; justify-content: center; align-items: center; }
.pie__boton {
  font: inherit;
  color: var(--neon);
  background: none;
  border: 0;
  padding: .6em .2em;
  cursor: pointer;
  letter-spacing: inherit;
}
/* ELIMINAR CUENTA (lo que pide Play): un enlace, en el turquesa de los enlaces; con el padding de los botones del pie se toca igual
   de fácil que CERRAR SESIÓN (sin él mide 7-9 px de alto) */
.pie__enlace { padding: .6em .2em; }
/* REPETIR TUTORIAL (2.7a), con su punto: solo cuando el tour está hecho o saltado */
.pie__repetir { display: inline-flex; gap: .8em; align-items: center; }
.pie__repetir[hidden] { display: none; }

/* ---------- Modo web / modo app ---------- */
.pie__app { display: none; }
.modo-app .pie__web,
.modo-app .descarga { display: none; }
.modo-app .pie__app { display: inline-flex; }
.modo-app .hud.lista,
.modo-web .hud.lista { visibility: visible; }
/* En la app, el menú y el pie esperan al perfil (2026-10-24, el probador en el Realme: en 8 de 8 aperturas se veía el
   menú completo, con PECEDEX y RANKING, de 0,13 a 0,42 s antes de quedarse en el del tutorial): primero el mar y luego
   todo a la vez, ya como es. Con opacidad y no con visibility, que la flecha de la opción activa la vuelve a poner */
.modo-app:not(.con-perfil) .portada,
.modo-app:not(.con-perfil) .pie { opacity: 0; pointer-events: none; }

/* ---------- PRÓXIMAMENTE ---------- */
.proximamente {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 10, 28, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: aparecer .35s ease-out;
}
.proximamente[hidden] { display: none; }
.proximamente__panel {
  width: min(560px, 100%);
  padding: 30px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(25, 195, 214, .12), rgba(10, 42, 94, .45));
  border: 2px solid rgba(25, 195, 214, .65);
  box-shadow: 0 0 0 4px rgba(4, 18, 43, .8), 0 0 36px rgba(25, 195, 214, .35), inset 0 0 40px rgba(25, 195, 214, .12);
  animation: emerger .5s var(--agua);
}
.proximamente__opcion { margin: 0 0 18px; font-size: clamp(.5rem, 2.4vw, .7rem); color: var(--turquesa); }
.proximamente__titulo {
  margin: 0 0 20px;
  font-size: clamp(1.1rem, 6vw, 2rem);
  color: #FFE3F2;
  text-shadow: 0 0 8px var(--neon), 0 0 24px rgba(255, 62, 165, .65);
}
.proximamente__texto {
  margin: 0 0 24px;
  font-family: var(--sans);
  -webkit-font-smoothing: auto;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--texto);
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes emerger {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Horizontal y poca altura ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .pantalla { gap: 1vh; padding-top: calc(var(--seguro-arriba) + 10px); }
  .portada { gap: 2vh; }
  .menu ul { gap: 1.4vh; margin-top: 0; }
  .menu__opcion { padding: .35em 1.6em; }
  .descarga__nota { display: none; }
}

/* ---------- Menos movimiento ---------- */
/* Con la pecera abierta encima (app): todo quieto, para no quitarle GPU (ver pausar en main.js) */
.en-pausa *, .en-pausa *::before, .en-pausa *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .mar__rayos, .mar__luz, .cristal__reflejo, .cristal__destello, .titulo span,
  .menu__opcion.activa::before, .menu__opcion.elegida, .parpadeo, .proximamente, .proximamente__panel {
    animation: none !important;
  }
  .cristal__destello { display: none; }
}