/* Pantalla de entrada (iniciar sesión / crear cuenta) y ventana "Mi cuenta" */
#auth-root { position: fixed; inset: 0; z-index: 50; overflow: auto; background: radial-gradient(ellipse at 50% 0%, #1c2a8a, var(--bg) 70%); }
.auth { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.auth__card {
  width: min(420px, 100%);
  padding: 18px 20px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 0 0 3px #63c2ff59, 0 6px 0 rgba(3, 10, 35, 0.55);
}
.auth__logo { margin: 0 0 6px; text-align: center; font-size: clamp(26px, 6vh, 40px); line-height: 1; color: var(--yellow); text-shadow: 0 3px 0 #5a2a00; }
.auth__card h2 { margin: 0 0 6px; text-align: center; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.auth__card .field input, .modal .field input[type='password'], .modal .field input[type='email'] {
  padding: 10px 12px;
  border: 3px solid var(--stroke, #061433);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: inherit;
  font-size: 1rem;
}
.auth__card .field { margin: 8px 0; }
.auth__submit { width: 100%; margin-top: 8px; }
.auth__msg { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 70, 90, 0.2); box-shadow: inset 0 0 0 2px rgba(255, 70, 90, 0.5); font-size: 0.9rem; }
.auth__msg.is-ok { background: rgba(60, 220, 120, 0.2); box-shadow: inset 0 0 0 2px rgba(60, 220, 120, 0.5); }
.auth__links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 0.88rem; }
.auth__links a { color: var(--cyan); }

.account__who { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.account__who small { display: block; }
.account__avatar { display: grid; place-items: center; width: 48px; height: 48px; font-size: 26px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); }
.account__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-height: 500px) and (orientation: landscape) {
  .auth { place-items: start center; padding: 8px; }
  .auth__card { padding: 10px 14px; }
  .auth__logo { font-size: 22px; }
  .auth__logo br { display: none; }
  .auth__card .field { margin: 4px 0; gap: 3px; }
  .auth__card .field input { padding: 6px 10px; }
}

/* Arranque: aviso de carga y de error */
.boot { text-align: center; }
.boot__wait { margin: 14px 0 6px; color: #cfe0ff; font-size: 1.05rem; animation: boot-pulse 1.2s ease-in-out infinite; }
@keyframes boot-pulse { 50% { opacity: 0.45; } }
.boot__error { margin: 10px 0; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px rgba(255, 70, 90, 0.5); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; font-size: 0.78rem; }
.boot__file { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 210, 63, 0.18); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, 0.55); text-align: left; overflow-wrap: anywhere; font-weight: 700; }

/* Selector de idioma: pantalla de idioma del primer arranque y selector pequeño al pie de las pantallas de entrada */
.lang-pick h2 small { display: block; margin-top: 2px; font-size: 0.8em; opacity: 0.75; text-transform: none; letter-spacing: 0; }
.lang-pick__list { display: grid; gap: 10px; margin-top: 14px; }
.lang-pick__btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; font-size: 1.25rem; }

.lang-switch { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lang-switch__btn { padding: 4px 10px; border: 2px solid transparent; border-radius: 999px; background: rgba(0, 0, 0, 0.25); color: #fff; font: inherit; font-size: 0.8rem; cursor: pointer; opacity: 0.75; }
.lang-switch__btn:hover { opacity: 1; }
.lang-switch__btn.is-active { border-color: var(--cyan); opacity: 1; }

/* Etiqueta de versión bajo el título del juego */
.auth__tag { width: fit-content; margin: 0 auto 8px; padding: 1px 10px; border-radius: 999px; background: #ff3d8b; box-shadow: inset 0 0 0 2px #061433; color: #fff; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }