/* ============================================================
   LOS LOGROS — la vitrina de la niña

   La mesa de trabajo del estudioso, con sus medallones encima. Este fondo era
   el de `report/` y se queda AQUÍ: la pantalla de los padres se llevó el
   paisaje del camino y esta se quedó con la mesa, que es donde se posan las
   monedas. No es un reparto arbitrario — una vitrina necesita una superficie
   donde apoyar las cosas, y un camino no la tiene.

   Casi todo lo de abajo viene tal cual de `informe.css`, de donde salió la
   sección. Se ha MOVIDO, no copiado: allí ya no está. Lo que sí sigue
   duplicado, y a propósito, es la estrella tallada —polígono y bisel—, que vive
   también en el `index.html` del menú porque aquella página lleva su CSS dentro
   para no meter una petición bloqueante antes de pintar el carrusel. Las dos
   salen del mismo guion: `docs/genera-estrella.py`.
   ============================================================ */
:root {
  /* Sólo claro, con `only`: el WebView de Android TV oscurece por algoritmo
     lo que no declara esquema y deja el texto blanco. Ver `juego-layout.css`. */
  color-scheme: only light;
  --crema:  #fdf4dc;
  --oro:    #fbd973;
  --oro-b:  #e0bb4d;
  /* El marrón medio de la mesa, medido sobre el propio JPEG (#513722) y un
     punto más oscuro. Sirve de relleno mientras carga el fondo y de color de la
     barra del navegador. */
  --bg:     #402c1b;
  --text:   #3b2f16;
  --muted:  #8a7550;
  --linea:  #e6d5ab;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` tiene que ganar, y hace falta el `!important` para que gane: el
   `[hidden] { display: none }` del navegador es una regla SUYA y cualquier
   regla de esta hoja le pasa por encima con sólo mencionar `display`. Aquí lo
   usan `#vacio` y `#lista`, y `.principal` dice `display: block`. Ya mordió una
   vez en `informe.css`. */
[hidden] { display: none !important; }

/* El fondo va TAMBIÉN en `html`: sin esto, al rodar más allá del final del
   documento (el rebote de iOS) asoma el blanco del lienzo por debajo. */
html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font: 17px/1.55 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: transparent;
  min-height: 100%;
  min-height: 100dvh;
}

/* La mesa, en capa fija propia y NO con `background-attachment: fixed` en el
   body: en iOS Safari `fixed` + `cover` dimensiona la imagen al alto del
   DOCUMENTO en vez de al de la ventana, y con muchos trofeos la mesa saldría
   ampliada al triple. Una capa `position: fixed` mide siempre la ventana.

   La imagen es vertical de origen (941×1672) y vale para las dos orientaciones
   porque los objetos están repartidos por todo el alto: la franja del centro
   que se ve en apaisado trae de todos modos la brújula, las monedas, la regla y
   el compás. Encuadre `50% 50%` y nada más — una mesa vista desde arriba no
   tiene arriba ni abajo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  /* EL PAISAJE LO PONE LA VERTICAL, no esta hoja. Al subirla al motor, un
     `url('../art/…')` de aquí pasaría a pedir `/game_engine/art/…`, que no
     existe. Cada vertical declara `--fondo-logros` en su página, y ahí la ruta
     va ABSOLUTA — dentro de una variable el navegador resuelve contra la hoja
     que la USA, aunque se declare en el documento. Sin arte, el color de `--bg`
     y la vitrina se ve sobria, no rota. */
  background-image: var(--fondo-logros, none);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* El mismo sitio y el mismo tamaño que en `account/`, en `report/` y que el
   botón de casa de los juegos: es el mismo gesto en todo el sitio. */
.volver {
  position: fixed;
  top:  max(18px, calc(env(safe-area-inset-top)  + 8px));
  left: max(18px, calc(env(safe-area-inset-left) + 8px));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crema); color: var(--muted);
  font-size: 22px; line-height: 1; text-decoration: none;
  box-shadow: 0 3px 10px rgba(90, 68, 22, .22);
  transition: transform .15s ease, color .15s ease;
  z-index: 10;
}
.volver:hover  { color: var(--text); }
.volver:active { transform: scale(.92); }

/* Ancho de REJILLA, no de lectura. En `report/` esta sección iba encajada en
   la columna del texto y tenía que salirse de ella con un `translateX` para no
   quedar alta y flaca; aquí es la página entera, así que mide lo que necesita y
   ya está. Un remiendo menos. */
main {
  width: 100%; max-width: 52rem; margin: 0 auto;
  padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 20px
           max(28px, calc(env(safe-area-inset-bottom) + 22px));
  /* CENTRADO, y no alineado a la izquierda como estaba en `report/`. Allí
     tenía que compartir eje con las fichas de texto, que se leen de izquierda a
     derecha; aquí no hay texto que leer — hay medallones, y una niña que
     todavía no lee mira al centro de la pantalla. Con dos trofeos, pegados a la
     izquierda, parecía que faltaba algo a la derecha. */
  text-align: center;
}

/* Letra CLARA sobre madera oscura, no oscura sobre clara. Se probó al revés
   —tinta oscura grabada, como las estrellas— y sobre esta mesa no se leía.
   Rotulado en crema es lo que hace cualquier cartel de este mundo, y con la
   sombra por debajo sigue pareciendo pintado ENCIMA de la tabla y no un papel
   pegado. La sombra es generosa a propósito: la mesa tiene veta y nudos, y sin
   ella la letra se rompe justo encima de un nudo. */
h1 {
  margin: 0;
  font: 400 1.65rem/1.25 "Bree Serif", Georgia, serif;
  color: #fff6e2;
  text-shadow: 0 2px 5px rgba(20, 10, 2, .90);
}
.pie {
  margin: 6px 0 0;
  color: #f3ddb2;
  font-size: .93rem;
  text-shadow: 0 1px 4px rgba(20, 10, 2, .88);
}

/* FLEX Y NO REJILLA, y es por los pocos. Con `grid` de columnas automáticas la
   rejilla se llena desde la izquierda: un solo trofeo se quedaba clavado en la
   esquina con seis columnas de mesa vacía al lado, que es justo el caso de una
   niña que acaba de empezar. Envolviendo y centrando, uno queda en medio y
   dieciséis llenan la pantalla, sin una regla por cada caso.

   Ancho FIJO por trofeo y no `1fr`: el hueco del medallón es un círculo
   (`aspect-ratio: 1`), así que dejarle estirarse a la fila entera lo convertiría
   en un plato gigante en cuanto haya uno solo. */
#lista {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 18px;
}
#lista li { width: 124px; }

/* EL HUECO DEL MEDALLÓN: un rebaje REDONDO, como el asiento de una moneda.
   Era un cuadrado con esquinas redondeadas y sobraba: los iconos de los juegos
   son medallones circulares, así que un marco rectangular alrededor dibujaba
   una segunda forma que no pintaba nada — se veía el recuadro antes que el
   dibujo. Un hueco redondo desaparece: sólo se lee la moneda metida en la
   tabla, que es lo que tiene que verse.

   El relieve, igual que en las estrellas: la pared alta en sombra por dentro y
   el canto de abajo recogiendo luz. Y nada más claro que la tabla, o el hueco
   se convierte en un botón saliendo hacia fuera. */
.trofeo-marco {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(35, 18, 4, .16) 0%,
      rgba(35, 18, 4, .34) 76%,
      rgba(35, 18, 4, .46) 100%);
  box-shadow: inset 0 5px 9px rgba(35, 18, 4, .62),
              inset 0 -3px 5px rgba(255, 236, 200, .17);
}
/* El emoji va SIEMPRE puesto y el dibujo encima, tapándolo. Si el dibujo no
   carga se quita y asoma el emoji solo — el mismo apaño que el menú, y evita
   tener que decidir de antemano cuál de los dos pintar. */
.trofeo-marco .emoji { font-size: 40px; line-height: 1; }
.trofeo-marco img {
  position: absolute;
  /* El medallón casi llena el hueco: sólo asoma el canto. Estuvo en `10%` y el
     rebaje se veía como un plato oscuro alrededor de una moneda pequeña —más
     hueco que trofeo—. A la mitad, lo que se lee es la moneda encajada. */
  inset: 5%;
  width: 90%; height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(40, 22, 8, .55));
}

/* EL PELDAÑO — el MISMO medallón que lleva su tarjeta en el menú: aro de
   progreso y la cifra. Tiene que ser el mismo dibujo, porque es lo que hace que
   la niña reconozca aquí lo que vio allí.

   ── EL ARO ──
   Un «7» no dice si eso es medio juego o casi todo, y las escaleras miden entre
   3 y 22 peldaños: sin el aro, dos números de dos tarjetas no son comparables.
   El aro lo cuenta sin escribir una fracción, que es lo único que sirve para
   quien no lee — y cuando está entero, el juego está terminado. `--p` es la
   fracción 0..1 y la escribe `logros.js`.

   ── AQUÍ HABÍA TRES ESTRELLAS TALLADAS ──
   Con su polígono y su bisel de diez tramos, los mismos que en el menú. Se
   fueron con las estrellas el 28 de agosto de 2026 (el porqué, en `logros.js`).

   ── Y ESTE MEDALLÓN SE LEE SOBRE LA MESA, QUE ES POR LO QUE ES UN MEDALLÓN ──
   Antes de esto hubo un número grabado en la madera, copiado del que lleva la
   tarjeta del menú, y NO SE LEÍA: allí funciona porque las tablas son claras y
   aquí la mesa es marrón oscuro, así que un surco de tinta oscura desaparece.
   Es exactamente el tropiezo que ya está contado más arriba para el nombre del
   juego. Un medallón trae su propio fondo, así que no depende de sobre qué caiga
   — y de paso vale igual en las dos pantallas sin tocar un color. */
.trofeo-nivel {
  position: relative;
  width: 56px;
  aspect-ratio: 1;
  margin: 11px auto 0;
  border-radius: 50%;
  display: grid;
  /* LOS DOS: `place-items` centra cada hijo en SU fila y `place-content` centra
     el bloque de filas dentro del medallón. Sin el segundo, las filas se apilan
     arriba y el rótulo se sale del disco por el borde. */
  place-items: center;
  place-content: center;
  /* Lo andado en oro y lo que queda en el MISMO oro apagado, no en negro: con el
     canal oscuro se funde con el disco de dentro y el tramo sin recorrer se lee
     como un mordisco en el medallón en vez de como lo que falta. */
  background: conic-gradient(from -90deg,
                var(--oro, #fbd973) calc(var(--p, 0) * 360deg),
                rgba(120, 88, 30, .62) 0);
  box-shadow: 0 0 0 2px rgba(20, 10, 2, .55),
              0 3px 7px rgba(20, 10, 2, .5),
              inset 0 1px 0 rgba(255, 245, 215, .45);
}
/* El disco de dentro, que es lo que deja el aro en aro. OPACO: translúcido deja
   ver el ARO de debajo —no la mesa—, o sea una cuña cruzando el número justo por
   donde el aro va apagado. Se vio en la primera captura de la pantalla de fin. */
.trofeo-nivel::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: #241505;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
}
/* Sólo la cifra: el «de cuántos» lo dice el aro. Aquí ponía «NIVEL» encima y se
   quitó el mismo día — esta pantalla es de la niña, que no lee, y la palabra le
   robaba sitio a lo único que entiende. Lo que necesita quien no ve el aro está
   en el `aria-label` del enlace. */
.trofeo-nivel b {
  position: relative;
  line-height: 1;
  color: var(--oro, #fbd973);
  font-family: var(--fuente-titulo, "Bree Serif", Georgia, serif);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* TERMINADO: el aro ya está entero —lo dice `--p: 1`— y lo único que se añade es
   el brillo. Es la única marca que distingue haberse acabado un juego, y hasta
   hoy no había ninguna: quien se acabó `silabas` entera lo veía igual que quien
   iba por la mitad. Con dos medallones en la mesa y uno de ellos encendido, la
   pregunta «¿y ése por qué?» se contesta jugando. */
.trofeo-nivel.completo {
  box-shadow: 0 0 0 2px rgba(20, 10, 2, .55),
              0 3px 7px rgba(20, 10, 2, .5),
              inset 0 1px 0 rgba(255, 245, 215, .45),
              0 0 16px rgba(255, 200, 80, .6);
}
.trofeo-nivel.completo b { color: #fff3cf; }

/* Cada trofeo lleva a su juego. Es lo que hace que esta página sirva para algo
   además de mirarse: ve lo que ya domina y se va a echar otra partida desde
   ahí. El nombre del juego escrito debajo se quitó —ella no lee, y el medallón
   es exactamente el mismo que pulsa en el menú—; queda en el `aria-label`, que
   es donde hace falta. */
a.trofeo {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.trofeo .trofeo-marco { transition: transform .12s ease-out; }
a.trofeo:active .trofeo-marco { transform: scale(.93); }

/* ── TODAVÍA NINGUNO ─────────────────────────────────────────
   Un hueco redondo vacío, esperando. No dice «no tienes nada»: dice dónde va a
   ir, que es lo mismo que hacen las tarjetas del menú antes de la primera
   partida. Y sale una salida hacia el juego, que es lo único que puede hacer
   ahora.

   Es el MISMO rebaje que el asiento de un medallón (`.trofeo-marco`), sin nada
   dentro: así lo que se ve vacío es exactamente la forma que se va a llenar.
   Antes eran tres estrellas talladas, y se fueron con ellas. */
#vacio { margin-top: 40px; text-align: center; }
.hueco-vacio {
  width: 88px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(35, 18, 4, .16) 0%,
      rgba(35, 18, 4, .34) 76%,
      rgba(35, 18, 4, .46) 100%);
  box-shadow: inset 0 5px 9px rgba(35, 18, 4, .62),
              inset 0 -3px 5px rgba(255, 236, 200, .17);
}
#vacio p {
  margin: 20px 0 0;
  color: #f3ddb2;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(20, 10, 2, .88);
}
/* El mismo botón de juguete que en `account/` y en `report/`: labio sólido
   debajo, y al pulsarlo se hunde. */
.principal {
  display: inline-block;
  margin: 20px 0 0;
  padding: 15px 30px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 1.06rem/1 Nunito, sans-serif;
  text-decoration: none; text-align: center;
  background: var(--oro); color: var(--text);
  box-shadow: 0 4px 0 var(--oro-b);
}
.principal:active { transform: translateY(2px); box-shadow: none; }