/* Pantalla de titulo de Angels World Mobile (titulo.js). Se pinta por encima
   del juego y por debajo del panel de entrada (#conexion), que queda flotando
   sobre el fondo animado. */
:root {
  --aw-oro: #ffd77a;
  --aw-oro-2: #f3b23c;
  --aw-oro-3: #fff4cf;
  --aw-cristal: rgba(255, 255, 255, .14);
  --aw-cristal-borde: rgba(255, 255, 255, .38);
  --aw-texto: #fffaf0;
  --aw-sombra: rgba(40, 20, 70, .55);
}

#titulo {
  position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #c9d8f2;
  font-family: "Montserrat", system-ui, sans-serif; color: var(--aw-texto);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: opacity 1.2s ease, visibility 1.2s;
}
#titulo.fuera { opacity: 0; visibility: hidden; }

/* --- fondo: dos ilustraciones que se funden, con zoom lento --- */
.aw-fondo {
  position: absolute; inset: -4%; background-size: cover; background-position: 50% 40%;
  animation: aw-kenburns 46s ease-in-out infinite alternate; will-change: transform, opacity;
}
.aw-fondo.b { opacity: 0; animation: aw-kenburns2 52s ease-in-out infinite alternate, aw-fundido 36s ease-in-out infinite; }
@keyframes aw-kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, 1.5%); } }
@keyframes aw-kenburns2 { from { transform: scale(1.14) translate(2%, -1%); } to { transform: scale(1.04) translate(-1%, 1%); } }
@keyframes aw-fundido { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* rayos de sol que giran despacio desde el sol de la ilustracion */
.aw-rayos {
  position: absolute; left: 38%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 210, .0) 0deg 7deg, rgba(255, 246, 210, .16) 9deg 12deg, rgba(255, 246, 210, 0) 14deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
          mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
  mix-blend-mode: screen; animation: aw-girar 140s linear infinite, aw-latido 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aw-girar { to { transform: rotate(360deg); } }
@keyframes aw-latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.aw-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.aw-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 240, 210, 0) 40%, rgba(60, 40, 110, .35) 100%),
    linear-gradient(to top, rgba(40, 24, 80, .62) 0%, rgba(40, 24, 80, .18) 28%, rgba(0, 0, 0, 0) 45%);
}

/* --- logo --- */
.aw-logo {
  position: absolute; left: 50%; top: 8vh; transform: translateX(-50%);
  width: min(78vw, 120vh); display: flex; flex-direction: column; align-items: center;
  animation: aw-flotar 7s ease-in-out infinite; pointer-events: none;
}
#titulo.menu .aw-logo { top: 4vh; width: min(66vw, 96vh); transition: top .9s ease, width .9s ease; }
@keyframes aw-flotar { 0%, 100% { margin-top: 0; } 50% { margin-top: -1.2vh; } }
.aw-alas {
  width: 72%; aspect-ratio: 1100 / 596; background: url(alas.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 2.2vh rgba(255, 215, 120, .55));
  transform-origin: 50% 70%; animation: aw-desplegar 1.8s cubic-bezier(.2, .9, .2, 1.1) both, aw-brillo 5s ease-in-out 1.8s infinite;
}
@keyframes aw-desplegar { from { transform: scale(.2, .6); opacity: 0; filter: brightness(3) drop-shadow(0 0 6vh #fff); } to { transform: none; opacity: 1; } }
@keyframes aw-brillo { 0%, 100% { filter: drop-shadow(0 0 1.6vh rgba(255, 215, 120, .45)); } 50% { filter: drop-shadow(0 0 3.4vh rgba(255, 236, 170, .95)) brightness(1.08); } }

.aw-nombre {
  margin-top: -9%; font-family: "Cinzel Decorative", "Cinzel", Georgia, serif; font-weight: 900;
  font-size: min(9.6vw, 15vh); line-height: 1; letter-spacing: .02em; white-space: nowrap; position: relative;
  background: linear-gradient(180deg, #fffbe9 0%, #ffe39a 38%, #f0a92c 62%, #ffe8a8 80%, #b8741a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .35vh 0 #7a4210) drop-shadow(0 .9vh 1.4vh var(--aw-sombra)) drop-shadow(0 0 2.4vh rgba(255, 220, 140, .6));
  animation: aw-subir 1.4s .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* destello que cruza las letras */
.aw-nombre::after {
  content: attr(data-texto); position: absolute; inset: 0; color: transparent;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 48%, transparent 58%) -200% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; animation: aw-destello 6s 2.6s ease-in-out infinite;
}
@keyframes aw-destello { 0% { background-position: -200% 0; } 35%, 100% { background-position: 200% 0; } }
.aw-mobile {
  margin-top: 2.6vh; padding: .9vh 9vh .9vh calc(9vh + .9em); font-family: "Cinzel", Georgia, serif; font-weight: 700;
  font-size: min(2.4vw, 3.8vh); letter-spacing: .9em; color: #ffe7a6;
  background: linear-gradient(90deg, rgba(58, 28, 96, 0), rgba(58, 28, 96, .62) 22%, rgba(58, 28, 96, .62) 78%, rgba(58, 28, 96, 0));
  border-top: 1px solid; border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, rgba(255, 215, 122, .9), transparent) 1;
  text-shadow: 0 0 1.2vh rgba(255, 200, 100, .8), 0 .2vh .4vh rgba(30, 10, 50, .8);
  animation: aw-subir 1.2s 1.2s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes aw-subir { from { opacity: 0; transform: translateY(3vh); letter-spacing: .3em; } to { opacity: 1; transform: none; } }

/* --- toca para empezar --- */
.aw-tocar {
  position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; font-weight: 600;
  font-size: min(2.4vw, 3.6vh); letter-spacing: .5em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 1.4vh rgba(255, 220, 150, .95), 0 .2vh .5vh rgba(0, 0, 0, .5);
  animation: aw-subir 1s 2s both, aw-parpadeo 2.4s 3s ease-in-out infinite;
}
@keyframes aw-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#titulo.menu .aw-tocar { display: none; }

/* --- menu --- */
.aw-menu {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); display: none;
  flex-direction: column; align-items: center; gap: 1.8vh; width: min(86vw, 62vh);
}
#titulo.menu .aw-menu { display: flex; }
#titulo.oculto-menu .aw-menu { display: none; }
#titulo .aw-logo { transition: opacity .5s ease; }
#titulo.oculto-menu .aw-logo { opacity: 0; }
.aw-boton {
  width: 100%; padding: 2.1vh 3vh; border-radius: 999px; font: 700 min(2.2vw, 3.2vh)/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden;
  color: #4a2a05; border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #fff6d6 0%, #ffd779 45%, #f2a93a 100%);
  box-shadow: 0 .8vh 2.4vh rgba(120, 60, 0, .35), inset 0 .3vh 0 rgba(255, 255, 255, .9), 0 0 2.6vh rgba(255, 210, 120, .55);
  opacity: 0; transform: translateY(3vh) scale(.96);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#titulo.menu .aw-boton { animation: aw-entrar .7s cubic-bezier(.2, .9, .2, 1.05) forwards; }
#titulo.menu .aw-boton:nth-child(2) { animation-delay: .12s; }
@keyframes aw-entrar { to { opacity: 1; transform: none; } }
.aw-boton::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-20deg);
  animation: aw-barrido 4.5s 1.5s ease-in-out infinite;
}
@keyframes aw-barrido { 0% { left: -60%; } 30%, 100% { left: 130%; } }
.aw-boton:hover { filter: brightness(1.06); transform: translateY(-.3vh) scale(1.015); }
.aw-boton:active { transform: translateY(.2vh) scale(.98); }
.aw-boton.cristal {
  color: #fff; background: var(--aw-cristal); border-color: var(--aw-cristal-borde);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 .8vh 2.4vh rgba(40, 20, 80, .35), inset 0 .2vh 0 rgba(255, 255, 255, .45);
  text-shadow: 0 .2vh .5vh rgba(40, 20, 80, .6);
}
.aw-boton.cristal::before { opacity: .4; }

/* esquinas: musica, pantalla completa, version */
.aw-esquina { position: absolute; top: 2vh; right: 2vh; display: flex; gap: 1.2vh; z-index: 2; }
.aw-redondo {
  width: 6vh; height: 6vh; min-width: 36px; min-height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--aw-cristal); border: 1px solid var(--aw-cristal-borde); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 .5vh 1.4vh rgba(40, 20, 80, .3);
}
.aw-redondo svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aw-redondo[aria-pressed="false"] { opacity: .6; }
.aw-pie {
  position: absolute; left: 2vh; bottom: 1.6vh; font-size: min(1.4vw, 2vh); letter-spacing: .12em; opacity: .85;
  text-shadow: 0 .2vh .4vh rgba(0, 0, 0, .55);
}

/* --- panel de entrada con aspecto moderno sobre el titulo --- */
/* la creacion de personaje sale por encima del titulo (su aspecto es de index.html) */
body.aw-moderno #creacion { z-index: 65; }
body.aw-moderno #conexion { z-index: 60; background: transparent; font-family: "Montserrat", system-ui, sans-serif; }
body.aw-moderno #conexion .ventana {
  max-width: 400px !important;
  background: linear-gradient(160deg, rgba(70, 44, 120, .55), rgba(36, 22, 70, .62));
  border: 1px solid rgba(255, 225, 160, .55); border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 2vh 5vh rgba(40, 20, 80, .45), inset 0 1px 0 rgba(255, 255, 255, .6); color: #fff;
  animation: aw-entrar-panel .6s cubic-bezier(.2, .9, .2, 1.05) both;
}
@keyframes aw-entrar-panel { from { opacity: 0; transform: translateY(4vh) scale(.96); } }
body.aw-moderno #conexion .ventana h2 {
  background: none; text-align: center; padding: 20px 90px 6px; font: 900 20px/1.2 "Cinzel Decorative", "Cinzel", Georgia, serif;
  letter-spacing: .06em; color: var(--aw-oro); text-shadow: 0 0 12px rgba(255, 210, 120, .7), 0 2px 0 #7a4210;
}
body.aw-moderno #conexion label[hidden] { display: none; }
body.aw-moderno #conexion .caja { background: transparent; border: 0; }
body.aw-moderno #conexion .fila { margin-bottom: 10px; align-items: center; }
body.aw-moderno #conexion label { color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .08em; }
body.aw-moderno #conexion .fila input {
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .85);
  color: #2a1a40; padding: 10px 12px; font: 600 14px "Montserrat", system-ui, sans-serif; outline: none;
}
body.aw-moderno #conexion .fila input:focus { box-shadow: 0 0 0 3px rgba(255, 215, 122, .7); }
body.aw-moderno #conexion button {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); color: #fff;
  font: 700 12px "Montserrat", system-ui, sans-serif; letter-spacing: .14em; padding: 10px 16px; text-transform: uppercase;
}
body.aw-moderno #conexion #red-entrar {
  color: #4a2a05; background: linear-gradient(180deg, #fff6d6, #ffd779 45%, #f2a93a); border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 16px rgba(120, 60, 0, .3); padding: 11px 26px;
}
body.aw-moderno #conexion .red-modos { gap: 6px; background: rgba(0, 0, 0, .15); padding: 4px; border-radius: 999px; }
body.aw-moderno #conexion .red-modos button { border-color: transparent; background: transparent; }
body.aw-moderno #conexion .red-modos button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #4a2a05; }
body.aw-moderno #conexion #red-personajes button { text-transform: none; letter-spacing: .04em; font-size: 13px; text-align: left; }
body.aw-moderno #conexion #red-estado { color: var(--aw-oro-3) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
body.aw-moderno #conexion #red-ayuda { color: #fff !important; opacity: .85; }
body.aw-moderno #conexion .aw-volver { position: absolute; top: 14px; left: 14px; padding: 7px 12px; font-size: 11px; }
body.aw-moderno #conexion .fila input::placeholder { color: #7a6a90; font-weight: 500; }

body.aw-moderno #conexion .ventana { max-height: calc(100vh - 16px); overflow-y: auto; }
/* moviles en horizontal: pantalla baja, panel compacto */
@media (max-height: 520px) {
  body.aw-moderno #conexion { padding: 8px; }
  body.aw-moderno #conexion .ventana h2 { padding: 12px 90px 2px; font-size: 16px; }
  body.aw-moderno #conexion .caja { margin: 6px 12px !important; padding: 4px; }
  body.aw-moderno #conexion .fila { margin-bottom: 6px; }
  body.aw-moderno #conexion .fila input { padding: 7px 10px; font-size: 13px; }
  body.aw-moderno #conexion button { padding: 7px 14px; }
  body.aw-moderno #conexion #red-entrar { padding: 8px 22px; }
  body.aw-moderno #conexion #red-ayuda { font-size: 11px !important; margin-bottom: 4px !important; }
  body.aw-moderno #conexion .aw-volver { top: 9px; left: 10px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-fondo, .aw-rayos, .aw-logo, .aw-alas, .aw-nombre::after, .aw-boton::before, .aw-tocar { animation: none !important; }
  .aw-alas, .aw-nombre, .aw-mobile, .aw-boton { opacity: 1 !important; transform: none !important; }
}