/* CAELYTTE V2 N1.7.4.6 — Login Silver2.0 portal separado, escenario pintado con criaturas integradas. */
.login-shell.ancestral-mode {
  --portal-accent: #55DCE4;
  padding: clamp(9px, 2.1vw, 28px) clamp(14px, 4.3vw, 76px);
  align-items:flex-end;
  justify-content:safe center;
}
.ancestral-scene-art {
  aspect-ratio:1672/941;
  width:max(100%,177.68dvh);
  height:max(100%,56.28vw);
}
/* Imagen base con vacío. El vórtice es una imagen separada, jamás sobre un remolino pintado. */
.ancestral-vortex {
  left:19.25%;top:16.75%;width:16.15%;height:38.1%;
  opacity:1;
  overflow:hidden;
  border-radius:49% / 49%;
  clip-path:ellipse(48.2% 49.2% at 50% 50%);
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 18px rgba(23,236,255,.32)) saturate(1.15);
  isolation:isolate;
}
/* Gira el arte EN CUADRADO antes de comprimirlo a elipse, evitando esquinas vacías al rotar. */
.ancestral-vortex-elliptic {
  position:absolute;top:0;left:-16.5%;width:133%;height:100%;
  transform:scaleX(.752);transform-origin:center;
}
.ancestral-vortex-elliptic img {
  display:block;width:100%;height:100%;max-width:none;object-fit:fill;
  transform-origin:50% 50%;
  animation:ancestral-vortex-turn 9s linear infinite;
  will-change:transform;
}
.ancestral-vortex::after {
  content:"";pointer-events:none;position:absolute;inset:0;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(226,255,237,.36),rgba(43,241,224,.07) 29%,transparent 69%);
  mix-blend-mode:screen;
  animation:anc46-core 3.4s ease-in-out infinite;
}
.ancestral-portal-light {
  left:17.7%;top:14.7%;width:19.2%;height:42%;
  background:radial-gradient(ellipse at center,rgba(180,255,243,.15) 0%,rgba(37,231,224,.15) 46%,transparent 74%);
  animation:ancestral-light-breathe 3.8s ease-in-out infinite;
}
.ancestral-runes {left:19.1%;top:16.6%;width:16.6%;height:39%;border-color:rgba(104,247,244,.16);animation:ancestral-rune-pulse 4.8s ease-in-out infinite}
.ancestral-particles {left:17.2%;top:12.7%;width:20.2%;height:48%}
.ancestral-particles i {animation-duration:4.6s;box-shadow:0 0 12px 4px rgba(87,244,236,.72)}
.ancestral-creature {display:none!important} /* Monstruos ya pintados en fondo oficial; evitar stickers superpuestos. */
.ancestral-legibility {background:linear-gradient(90deg,transparent 0%,rgba(8,9,11,.02) 44%,rgba(8,9,11,.22) 64%,rgba(8,9,11,.44) 100%)}
.login-shell.ancestral-mode .login-card {
  width:min(100%,450px);
  padding:clamp(23px,2.6vw,37px) clamp(23px,2.5vw,34px) clamp(19px,2.1vw,30px);
  background:#171B21;
  border:1px solid transparent;
  border-image-source:url('/assets/runtime/portal-frame-caelytte.webp');
  border-image-slice:150 122 145 122 fill;
  border-image-width:64px 57px 60px 57px;
  border-image-repeat:stretch;
  box-shadow:0 14px 46px rgba(0,0,0,.36);
  border-radius:0;
}
.login-shell.ancestral-mode .login-card::before,
.login-shell.ancestral-mode .login-card::after {display:none}
.ancestral-mode .ancestral-emblem,.ancestral-mode .login-card > .eyebrow {display:none}
.ancestral-mode .login-card h1.ancestral-brand {margin:0 auto 0;line-height:0;letter-spacing:0;text-shadow:none}
.ancestral-mode .ancestral-brand img {
  display:block;width:min(100%,300px);max-width:100%;height:auto;
  margin:0 auto;filter:drop-shadow(0 2px 7px rgba(43,202,237,.20));
}
.ancestral-mode .login-card > .ancestral-subtitle {font-size:clamp(15px,1.7vw,20px);margin:0 0 1px}
.ancestral-mode .login-card > .ancestral-welcome {font-size:11px;margin-bottom:9px}
.ancestral-mode .login-card > label {margin:5px 0 4px;font-size:11px}
.ancestral-mode #profile-slot {min-height:38px}
.ancestral-mode .account-panel {margin:7px 0 0}
.ancestral-mode .account-panel h2 {font-size:17px;margin:4px 0 7px}
.ancestral-mode .login-card form {gap:4px}
.ancestral-mode .login-card form label {font-size:12px;margin:1px 0;gap:3px}
.ancestral-mode .login-card input {min-height:39px}
.ancestral-mode .login-card form button[type="submit"] {
  min-height:44px;margin-top:8px;
  background:linear-gradient(180deg,#F1F3F6,#BCC7D2 58%,#727D8B);
  border:1px solid #D4DAE2;
  box-shadow:inset 0 1px 0 white,0 3px 11px rgba(8,9,11,.4),0 0 0 1px rgba(78,204,236,.13);
  color:#10151D;letter-spacing:.025em;
}
.ancestral-mode .login-card form button[type="submit"]:not(:disabled):hover {filter:brightness(1.08);box-shadow:0 0 17px rgba(85,220,228,.35),inset 0 1px 0 white}
.ancestral-mode .login-card .button-subtle {min-height:37px;margin-top:7px;background:linear-gradient(180deg,#26303B,#111820)}
.ancestral-mode #account-status {margin:8px 0 0;min-height:15px}
@keyframes anc46-core {0%,100%{opacity:.28;transform:scale(.92)}50%{opacity:1;transform:scale(1.09)}}
/* Portátiles de altura reducida sin F11. */
@media (max-height:780px) and (min-width:801px) {
  .login-shell.ancestral-mode {padding-top:8px;padding-bottom:8px}
  .login-shell.ancestral-mode .login-card {padding:12px 31px 12px;max-width:440px}
  .ancestral-mode .ancestral-brand img {width:min(100%,245px)}
  .ancestral-mode .login-card > .ancestral-subtitle {font-size:16px}
  .ancestral-mode .login-card > .ancestral-welcome {font-size:10px;margin-bottom:5px}
  .ancestral-mode .account-panel {margin-top:4px}
  .ancestral-mode .account-panel h2 {margin:1px 0 4px;font-size:16px}
  .ancestral-mode .login-card input,.ancestral-mode #profile-slot {min-height:36px}
  .ancestral-mode .login-card form button[type="submit"] {min-height:41px;margin-top:4px}
  .ancestral-mode .login-card .button-subtle {min-height:33px;margin-top:6px}
  .ancestral-mode #account-status {margin-top:5px}
}
@media (max-width:800px){
  .login-shell.ancestral-mode {align-items:center;justify-content:safe flex-start;padding:10px}
  .login-shell.ancestral-mode .login-card {margin:auto;max-width:440px;padding:26px clamp(23px,6vw,33px)}
  .ancestral-legibility {background:rgba(8,9,11,.44)}
}
@media (max-width:440px){
  .login-shell.ancestral-mode .login-card {padding:21px 28px 22px}
  .ancestral-mode .ancestral-brand img {width:min(100%,260px)}
  .ancestral-mode .login-card > .ancestral-welcome {margin-bottom:7px}
}
@media(prefers-reduced-motion:reduce){
  .ancestral-vortex-elliptic img,.ancestral-vortex::after,.ancestral-portal-light,.ancestral-runes,.ancestral-particles i {animation:none!important;will-change:auto!important}
}