/* ---------- La web instalada como app (Dani, 29-9-2026) ----------

   La app y la web se ven y funcionan igual (Dani, 6-10-2026: «tanto la app
   como la web tienen que ser idénticas»). Lo de abrirla desde el icono que no
   es aspecto sino necesidad --el hueco de la barra de estado del iPhone-- va
   en el bloque de `standalone`; todo lo demás vale en las dos. */

/* La barra de pestañas viene escrita en cada página, para que esté desde el
   primer fotograma; aquí se decide cuándo se ve, y js/app.js le da el tacto. */
.barra-app { display: none; }

@media (display-mode: standalone) {
  /* La barra de estado del iPhone es transparente en la app
     (apple-mobile-web-app-status-bar-style): la cabecera baja lo que ocupa, y
     con ella lo que la página deja libre arriba. Fuera del iPhone vale cero. */
  .cabecera.cabecera--quieta,
  .cabecera.cabecera--quieta.pegada,
  .cabecera.cabecera--quieta.posada { padding-top: calc(10px + env(safe-area-inset-top)); }

  :root:has(.cabecera--quieta:not(.cabecera--limpia)) { --cabecera: calc(69px + env(safe-area-inset-top)); }
}

/* Sin el destello azul al tocar un enlace: lo que se toca responde con su
   propio estado, no con un recuadro del navegador. */
a, button { -webkit-tap-highlight-color: transparent; }

/* Al cambiar de página, la de antes se desenfoca y se apaga y la nueva sale
   enfocándose, como los menús del juego (Dani, 6-10-2026: «Desenfoque», de
   seis). Igual en la web y en la app; sustituye a la cortina negra que solo
   tenía la app. Que se haga lo dice cada página en su <head>; aquí, cómo. En
   el móvil la barra de pestañas no se mueve (su `view-transition-name`). */
::view-transition-old(root) { animation: wi-pagina-sale 440ms ease-in-out both; }
::view-transition-new(root) { animation: wi-pagina-entra 440ms 90ms ease-out both; }

/* Sobre negro y mezcladas como dos capas normales. El navegador las suma por
   defecto (plus-lighter), pensado para un fundido: con el desenfoque las dos a
   la vez se aclaraban y salía un gris lechoso. */
::view-transition { background: var(--fondo); }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

@keyframes wi-pagina-sale { to { opacity: 0; filter: blur(18px) brightness(.6); transform: scale(1.04); } }
@keyframes wi-pagina-entra { from { opacity: 0; filter: blur(18px); transform: scale(.98); } }

@keyframes wi-cortina-entra { from { opacity: 0; } }
@keyframes wi-cortina-sale { to { opacity: 0; } }

/* El programa de Windows, al abrirse (Dani, 2-10-2026): negro y el logotipo
   en medio, como la pantalla de arranque de la propia app (Taller/app/App.cs,
   `Arranque`) y en el mismo sitio y del mismo tamaño, `min(44vw, 200px)` y
   centrado: la app quita la suya cuando esta ya se ve, y no se nota el cambio.
   Solo en la app: lo pone y lo quita js/antes.js, y solo dentro de ella.

   Y sale como en el cine («más lograda y más cinematográfica»): el logotipo
   se acerca a cámara mientras se apaga, el telón se abre despacio y la
   página, que esperaba detrás desenfocada y un poco más cerca, se enfoca. Son
   dos capas para que cada una lleve su ritmo: el telón (::before) y el
   logotipo (::after).

   El mismo telón sirve para «Jugar» (html[data-jugando], js/app.js): baja al
   revés --la página se oscurece y se desenfoca, se cierra el negro y el
   logotipo se posa en medio-- con «Abriendo el juego» debajo, y se queda
   hasta que el juego enseña su ventana. Al volver del juego, sale igual que
   al arrancar. */
html[data-arranque] body::before,
html[data-arranque] body::after,
html[data-jugando] body::before,
html[data-jugando] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html[data-arranque] body::before,
html[data-jugando] body::before { z-index: 100; background: #000; }

html[data-arranque] body::after,
html[data-jugando] body::after { z-index: 101; background: url("/img/logotipo.webp") center / min(44vw, 200px) auto no-repeat; }

html[data-arranque] body > :not(.jugando-rotulo),
html[data-jugando] body > :not(.jugando-rotulo) {
  filter: blur(12px) brightness(.4);
  transform: scale(1.06);
}

/* El logotipo se va antes de que se abra el telón: encima de la página
   asomando, los dos a la vez, se veía revuelto (medido fotograma a fotograma). */
html:is([data-arranque="sale"], [data-jugando="sale"]) body::after { animation: wi-arranque-logo 700ms cubic-bezier(.55, 0, 1, .45) both; }
html:is([data-arranque="sale"], [data-jugando="sale"]) body::before { animation: wi-arranque-telon 1100ms 450ms cubic-bezier(.45, 0, .25, 1) both; }
html:is([data-arranque="sale"], [data-jugando="sale"]) body > :not(.jugando-rotulo) { animation: wi-arranque-pagina 1400ms 450ms var(--curva) both; }

@keyframes wi-arranque-logo { to { opacity: 0; transform: scale(1.12); } }
@keyframes wi-arranque-telon { to { opacity: 0; } }
@keyframes wi-arranque-pagina { to { filter: none; transform: none; } }

/* «Jugar»: lo mismo al revés. Primero la página se va, luego el negro, y el
   logotipo llega de un poco más cerca y se posa. */
html[data-jugando="entra"] body > :not(.jugando-rotulo) { animation: wi-jugando-pagina 900ms var(--curva-suave) both; }
html[data-jugando="entra"] body::before { animation: wi-jugando-telon 800ms 150ms cubic-bezier(.45, 0, .25, 1) both; }
html[data-jugando="entra"] body::after { animation: wi-jugando-logo 900ms 650ms var(--curva-entrada) both; }

@keyframes wi-jugando-pagina { from { filter: none; transform: none; } }
@keyframes wi-jugando-telon { from { opacity: 0; } }
@keyframes wi-jugando-logo { from { opacity: 0; transform: scale(1.12); } }

/* «Abriendo el juego», debajo del logotipo, con una raya que va y viene: el
   juego tarda unos segundos en enseñarse y no siempre lo mismo, así que una
   cuenta atrás mentiría. */
.jugando-rotulo { display: none; }

html[data-jugando] .jugando-rotulo {
  position: fixed;
  left: 50%;
  top: calc(50% + min(15.9vw, 72px) + 30px);
  z-index: 102;
  display: grid;
  justify-items: center;
  gap: 14px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  pointer-events: none;
  animation: wi-jugando-telon 700ms 1100ms ease both;
}

html[data-jugando] .jugando-rotulo i {
  position: relative;
  width: 120px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

html[data-jugando] .jugando-rotulo i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background: var(--arena);
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}

/* Al salir, el rótulo se va el primero */
html[data-jugando="sale"] .jugando-rotulo { animation: wi-arranque-telon 300ms ease both; }

@keyframes wi-cargando {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}


/* ---------- En el móvil: las secciones abajo, a un toque del pulgar ----------

   Sin la app no hay botón de atrás del navegador, y detrás del menú de tres
   rayas cada sección costaba dos toques. La barra lo sustituye: el menú
   desaparece, y la ficha de usuario de la cabecera también, porque ya está en
   «Perfil». En la web del móvil igual que en la app (Dani, 6-10-2026).

   Flota sobre la página y es de cristal (Dani, 30-9-2026): lo de debajo se ve
   borroso a través, con un canto de luz arriba y la pestaña puesta como una
   pastilla más clara dentro. */

@media (max-width: 820px) {
  :root { --barra-app: calc(84px + env(safe-area-inset-bottom)); }

  /* Que lo último de cada página --el pie, un botón-- no quede debajo. La sala
     mide la pantalla entera, así que se resta en su alto y no en el cuerpo. */
  body:not(:has(.sala-pagina)) { padding-bottom: var(--barra-app); }
  .sala-pagina { padding-bottom: var(--barra-app); }

  .menu__boton,
  .cabecera .usuario { display: none; }

  /* Lo que ya iba pegado abajo, ahora encima de la barra. */
  .pregon { bottom: calc(var(--barra-app) + var(--e2)); }

  .barra-compra {
    bottom: var(--barra-app);
    padding-bottom: var(--e3);
  }

  .barra-app {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    height: 64px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)),
      rgba(20, 20, 20, .5);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 18px 40px -14px rgba(0, 0, 0, .85);
    view-transition-name: barra-app;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .barra-app a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    border-radius: 18px;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    touch-action: manipulation;
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
  }

  .barra-app svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .barra-app a[aria-current="page"] {
    color: var(--arena);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* Al tocar, en el acto: la pastilla se hunde un poco. La pone js/app.js al
     apoyar el dedo, porque en el iPhone :active no llega sin ayuda. */
  .barra-app a.pulsada { background: rgba(255, 255, 255, .14); transform: scale(.95); }

  .barra-app a:focus-visible { outline: 2px solid var(--arena); outline-offset: -2px; }

  /* Mientras llega la página nueva, una raya que recorre el canto de arriba. */
  .barra-app.yendo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 2px;
    border-radius: 2px;
    background: var(--arena);
    animation: wi-cargando 900ms var(--curva-suave) infinite;
  }

  /* Con el teclado abierto la barra sube con él y tapa lo que se escribe. */
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]), textarea, select):focus) .barra-app { display: none; }
}


/* ---------- La invitación a crear cuenta ----------

   Sin cuenta, lo que la pide --la sala, el perfil, las plazas, los avances y el
   diario-- y cualquier enlace a /registro abren esta hoja en vez de otra
   página, con el logotipo y el formulario de alta dentro (Dani, 6-10-2026).
   Los enlaces a /entrar, y el «Entra» de la propia hoja, la abren con el de
   entrar.
   Sale en medio, del mismo cristal que la barra y con la página difuminada
   detrás, también en el móvil: pegada abajo se leía como algo del navegador y
   no de la página. Tocar fuera la cierra. La pone js/app.js; los formularios,
   de registro.html y entrar.html, js/alta.js y js/entrada.js. */

.invitacion {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .45);
  /* Que se vea que lo de detrás sigue ahí, pero sin leerse: con 6 px el texto
     de la página competía con el de la hoja. */
  backdrop-filter: blur(14px) saturate(120%);
  animation: wi-cortina-entra 200ms var(--curva) both;
}

.invitacion--sale { animation: wi-cortina-sale 200ms var(--curva) both; }

.invitacion__hoja {
  position: relative;
  display: grid;
  gap: var(--e3);
  width: 100%;
  max-width: 28rem;
  /* En una pantalla baja el formulario no cabe: se desplaza la hoja, y sin
     arrastrar a la página de detrás al llegar al final. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e6) var(--e5) var(--e5);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)),
    rgba(20, 20, 20, .72);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -20px rgba(0, 0, 0, .9);
  text-align: center;
  animation: wi-hoja-aparece 300ms var(--curva-entrada) both;
}

.invitacion--sale .invitacion__hoja { animation: wi-hoja-desaparece 200ms var(--curva) both; }
.invitacion__hoja:focus { outline: none; }

/* La orilla al atardecer arriba, de borde a borde, y el logotipo montado
   encima (Dani, 6-10-2026, «Google primero · Foto arriba»). La foto se funde
   con su máscara y no con un degradado: debajo está el cristal de la hoja, que
   deja ver la página, y un degradado a un color fijo se leía como una franja. */
.invitacion__hoja { --hoja-lado: var(--e5); padding-top: 0; }
.invitacion__foto { height: 190px; margin: 0 calc(var(--hoja-lado) * -1); }
.invitacion__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
}

.invitacion__logo {
  position: relative;
  justify-self: center;
  width: 116px;
  height: auto;
  margin: -66px 0 var(--e2);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .75));
}
.invitacion__hoja h2 { margin: 0; font-size: var(--t-xl); text-wrap: balance; }
.invitacion__texto { margin: 0; font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }
.invitacion__texto:empty { display: none; }
.invitacion__hoja .boton { width: 100%; justify-content: center; }

/* El formulario de /registro o el de /entrar, más apretado: en la página tiene
   una pantalla entera, y aquí una hoja. */
.invitacion__formulario { margin-top: var(--e3); text-align: left; }
.invitacion__formulario .campo { margin-bottom: var(--e4); }
.invitacion__formulario .campo input { padding: 11px 14px; }
.invitacion__formulario .campo .clave input { padding-left: 46px; }
.invitacion__formulario .letra-pequena,
.invitacion__formulario .acceso__otra { text-align: center; }
/* La explicación del segundo paso: en la página lleva el aire de una pantalla. */
.invitacion__formulario .acceso__sub { margin: 0 0 var(--e4); font-size: var(--t-md); text-align: center; }
/* En la de entrar, «¿Todavía no tienes cuenta?» va justo debajo del botón: sin
   aire se leía como parte de él. */
.invitacion__formulario .campos-correo + .acceso__otra { margin-top: var(--e4); }
.invitacion__espera { margin: 0; padding: var(--e6) 0; text-align: center; color: var(--tenue); }

/* Encima de la foto: oscura, para que se vea sobre el cielo. */
.invitacion__cerrar {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: var(--texto);
  cursor: pointer;
}

.invitacion__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.invitacion__cerrar:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

@keyframes wi-hoja-aparece { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes wi-hoja-desaparece { to { opacity: 0; transform: scale(.97); } }

/* En el ordenador, mas ancha, con el titulo mas grande y los botones en fila: en
   el movil no caben. */
@media (min-width: 700px) {
  .invitacion { padding: var(--e5); }
  .invitacion__hoja { --hoja-lado: var(--e6); max-width: 30rem; padding: 0 var(--e6) var(--e6); }
  .invitacion__foto { height: 210px; }
  .invitacion__hoja h2 { font-size: var(--t-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .invitacion__hoja { animation-name: wi-cortina-entra; }
  .invitacion--sale .invitacion__hoja { animation-name: wi-cortina-sale; }
}


/* ---------- El juego, instalándose desde la app de Windows ----------

   La app «White Island» instala el juego ella misma y va contando cómo va
   (js/app.js, `WIJuego`; Dani, 2-10-2026): la barra entera, en el perfil
   (js/mi-copia.js), y un resumen en el menú de arriba de todas las páginas,
   donde va «Jugar» cuando el juego ya está. html[data-app-instala] lo pone
   js/app.js en la app que sabe instalar (la de antes lo baja al navegador). */

html[data-app-instala] [data-solo-navegador] { display: none !important; }

.instalacion {
  display: grid;
  gap: var(--e2);
  width: 100%;
  max-width: 32rem;
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.instalacion__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
}

.instalacion__fase { font-weight: 600; }
.instalacion__cifra { font-weight: 700; color: var(--arena); font-variant-numeric: tabular-nums; }

.instalacion__barra {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.instalacion__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--arena), var(--arena-viva));
  transition: width 400ms linear;
}

/* Comprobando o mientras Windows lo revisa no hay cifra: la raya va y viene. */
.instalacion--sin-cifra .instalacion__relleno {
  width: 30%;
  transition: none;
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}

.instalacion__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
}

.instalacion__detalle {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.instalacion__pie .enlace-suelto { flex: none; font-size: var(--t-sm); }

/* El fallo, encima de los botones y a lo ancho. */
.caratula__botones > .aviso-envio { flex-basis: 100%; margin: 0; }

/* Desinstalar no compite con «Jugar»: un enlace apagado a su lado. */
.caratula__quitar {
  align-self: center;
  margin-left: var(--e2);
  font-size: var(--t-sm);
  color: var(--apagado);
}

.caratula__quitar:hover { color: var(--texto); }

/* En el menú, mientras se instala, en el sitio de «Jugar»: lleva al perfil. */
.menu-instalando {
  position: relative;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.menu-instalando::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hecho, 0%);
  height: 2px;
  background: var(--arena);
  transition: width 400ms linear;
}

.menu-instalando[data-sin-cifra]::after {
  width: 30%;
  transition: none;
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}


/* ---------- Bajarse la app de Windows ----------

   Se ofrece aunque vaya sin firmar (Dani, 2-10-2026): en el perfil, como la
   forma de instalar el juego, y en el «Instalar la app» del pie. Solo en
   Windows y fuera de la app: html[data-windows] lo pone js/app.js. */

html:not([data-windows]) [data-solo-windows] { display: none !important; }

.app-windows {
  margin-top: var(--e5);
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.app-windows__titulo { margin: 0 0 6px; font-weight: 600; }
.app-windows__texto { margin: 0 0 var(--e3); font-size: var(--t-md); color: var(--tenue); }
.app-windows .letra-pequena { margin-top: var(--e3); }

/* Al bajarla, los dos avisos que vienen y qué pulsar: abajo, en medio, hasta
   que se cierra o pasa medio minuto. */
.aviso-programa {
  position: fixed;
  left: 50%;
  bottom: var(--e5);
  z-index: 80;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  width: min(34rem, calc(100vw - 2 * var(--e4)));
  padding: var(--e4) var(--e3) var(--e4) var(--e5);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  box-shadow: var(--s3);
  opacity: 0;
  transform: translate(-50%, 1rem);
  pointer-events: none;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.aviso-programa--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-programa p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--tenue); }
.aviso-programa strong { color: var(--texto); }

.aviso-programa__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--tenue);
  cursor: pointer;
}

.aviso-programa__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.aviso-programa__cerrar:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }


/* Sin movimiento, la raya de cargando se queda quieta a lo ancho. Al final del
   archivo para que gane a la de arriba. */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .barra-app.yendo::before { animation: none; width: 100%; opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .instalacion--sin-cifra .instalacion__relleno,
  .menu-instalando[data-sin-cifra]::after { animation: none; width: 100%; opacity: .5; }

  /* El arranque de la app y «Jugar», sin acercarse ni enfocar: solo se apagan y se encienden */
  html[data-arranque] body > :not(.jugando-rotulo),
  html[data-jugando] body > :not(.jugando-rotulo) { filter: none; transform: none; animation: none; }
  html:is([data-arranque="sale"], [data-jugando="sale"]) body::before,
  html:is([data-arranque="sale"], [data-jugando="sale"]) body::after { animation: wi-arranque-telon 600ms ease both; }
  html[data-jugando="entra"] body::before,
  html[data-jugando="entra"] body::after { animation: wi-jugando-telon 400ms ease both; }
  html[data-jugando] .jugando-rotulo i::after { animation: none; width: 100%; opacity: .5; }
}
