/* CAELYTTE V2 N1.7.4.5 — El Umbral Ancestral.
   Escena y capas decorativas; los formularios originales siguen siendo HTML real.
   Sólo .ancestral-mode, nunca HUD ni autenticación del servidor. */
.login-shell.ancestral-mode {
  --hud-gold: #727D8B;
  --hud-gold-light: #F1F3F6;
  --hud-gold-muted: #48515D;
  --hud-black: #08090B;
  --hud-black-soft: #171B21;
  --hud-panel: #171B21;
  --hud-text: #F1F3F6;
  --hud-muted: #AAB4C0;
  --portal-turquoise: #55DCE4;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: safe center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: clamp(12px,2.5vw,38px) clamp(12px,5vw,84px);
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background: #08090B;
  color: #F1F3F6;
  scrollbar-color: #727D8B #08090B;
}
/* Use an uncropped original painting; all clickable UI is separate DOM. */
.ancestral-scene {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.ancestral-scene-art {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 177.68dvh);
  height: max(100%, 56.28vw);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%,-50%);
  overflow: hidden;
}
.ancestral-scene-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-width:none}
/* Precisely aligned with the spiral painted into the 1672×941 panorama.
   Rotating artwork is feather-masked, while stone and roots remain stationary. */
.ancestral-vortex {
  position: absolute;
  left: 24.64%;top: 23.80%;width: 14.95%;height: 28.48%;
  overflow: hidden;
  border-radius: 49%;
  clip-path: ellipse(49% 49% at 50% 50%);
  opacity: .82;
  mix-blend-mode: screen;
  filter: saturate(1.24);
}
.ancestral-vortex img {
  width:100%;height:100%;max-width:none;
  transform-origin: center;
  animation: ancestral-vortex-turn 25s linear infinite;
}
.ancestral-portal-light {
  position:absolute;left:22.8%;top:21%;width:18%;height:33%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(173,255,245,.12) 0%,rgba(85,220,228,.10) 38%,rgba(85,220,228,0) 71%);
  mix-blend-mode:screen;
  animation: ancestral-light-breathe 5.5s ease-in-out infinite;
}
.ancestral-runes {
  position:absolute;left:23.8%;top:21%;width:17.3%;height:34%;
  border-radius:50%;border:2px solid rgba(85,220,228,.09);
  box-shadow:0 0 18px rgba(85,220,228,.13),inset 0 0 24px rgba(85,220,228,.06);
  animation:ancestral-rune-pulse 7s ease-in-out infinite;
}
.ancestral-particles {position:absolute;left:22%;top:17%;width:24%;height:42%}
.ancestral-particles i {
  position:absolute;display:block;width:3px;height:3px;border-radius:50%;
  background:#BDFEF4;box-shadow:0 0 10px 3px rgba(85,220,228,.7);
  opacity:0;animation:ancestral-dust 6s ease-in-out infinite;
}
.ancestral-particles i:nth-child(1){left:15%;top:76%;animation-delay:0s}
.ancestral-particles i:nth-child(2){left:55%;top:67%;animation-delay:1s;animation-duration:8s}
.ancestral-particles i:nth-child(3){left:82%;top:43%;animation-delay:2.6s}
.ancestral-particles i:nth-child(4){left:38%;top:31%;animation-delay:3.5s;animation-duration:7s}
.ancestral-particles i:nth-child(5){left:21%;top:16%;animation-delay:1.8s}
.ancestral-particles i:nth-child(6){left:76%;top:87%;animation-delay:4.2s;animation-duration:9s}
.ancestral-particles i:nth-child(7){left:90%;top:72%;animation-delay:2s}
.ancestral-particles i:nth-child(8){left:49%;top:89%;animation-delay:4.8s;animation-duration:8s}
.ancestral-particles i:nth-child(9){left:10%;top:40%;animation-delay:3.1s}
.ancestral-creature {position:absolute;max-width:none;object-fit:contain;transform-origin:center bottom;filter:drop-shadow(0 4px 8px rgba(0,0,0,.65))}
.ancestral-babosa {left:8%;top:68.5%;width:13.6%;height:auto;animation:ancestral-babosa-breathe 4.5s ease-in-out infinite}
.ancestral-luciernaga {left:44.5%;top:21%;width:7.7%;height:auto;filter:drop-shadow(0 0 12px rgba(85,220,228,.5));animation:ancestral-luciernaga-hover 4.1s ease-in-out infinite}
.ancestral-legibility {position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(8,9,11,.02) 0%,rgba(8,9,11,.03) 49%,rgba(8,9,11,.25) 65%,rgba(8,9,11,.58) 100%)}
.login-shell.ancestral-mode .login-card {
  position:relative;z-index:1;
  flex:0 0 auto;
  width:min(100%,460px);
  min-width:0;
  margin-left:auto;
  padding:clamp(20px,2.6vw,34px);
  border:2px solid #727D8B;
  border-radius:14px;
  background:rgba(23,27,33,.96);
  box-shadow:0 22px 65px rgba(0,0,0,.58), inset 0 0 0 1px #48515D;
  color:#F1F3F6;
  text-align:left;
}
.login-shell.ancestral-mode .login-card::before,
.login-shell.ancestral-mode .login-card::after {
  content:"";position:absolute;pointer-events:none;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,#727D8B,transparent);
}
.login-shell.ancestral-mode .login-card::before {top:12px}
.login-shell.ancestral-mode .login-card::after {bottom:12px}
.ancestral-mode .ancestral-emblem {display:block;text-align:center;font-size:30px;line-height:1.2;color:#55DCE4;text-shadow:0 0 14px rgba(85,220,228,.65)}
.ancestral-mode .login-card > .eyebrow {text-align:center;color:#AAB4C0;font-size:10px;letter-spacing:.18em;margin:5px 0 2px}
.ancestral-mode .login-card h1 {
  margin:0;
  font:700 clamp(31px,3vw,47px) Georgia,serif;
  letter-spacing:.08em;text-align:center;color:#F1F3F6;
  text-shadow:0 0 17px rgba(85,220,228,.18),0 2px 6px #08090B;
}
.ancestral-mode .login-card > .ancestral-subtitle {color:#D4DAE2;font:20px Georgia,serif;text-align:center;margin:4px 0 4px}
.ancestral-mode .login-card > .ancestral-welcome {color:#AAB4C0;text-align:center;font-size:12px;margin:0 0 15px}
.ancestral-mode .login-card > label {margin:8px 0 5px;font-size:12px;color:#AAB4C0;font-weight:600}
.ancestral-mode #profile-slot {min-height:42px}
.ancestral-mode .account-panel {margin:11px 0 0}
.ancestral-mode .account-panel h2 {font:700 20px Georgia,serif;text-align:center;color:#F1F3F6;margin:7px 0 10px}
.ancestral-mode .login-card form {display:grid;gap:8px}
.ancestral-mode .login-card form label {display:grid;gap:5px;margin:4px 0;color:#D4DAE2;font-size:13px;font-weight:600}
.ancestral-mode .login-card input,
.ancestral-mode .login-card select {
  display:block;width:100%;min-height:44px;
  background:#08090B;border:1px solid #48515D;border-radius:7px;
  color:#F1F3F6;font-size:15px;
}
.ancestral-mode .login-card input::placeholder {color:#AAB4C0}
.ancestral-mode .login-card :is(input,select,button):focus-visible {outline:2px solid #55DCE4;outline-offset:3px}
.ancestral-mode .login-card form button[type="submit"] {
  margin-top:7px;min-height:46px;padding:10px 12px;
  border:1px solid #D4DAE2;border-radius:9px;
  background:linear-gradient(180deg,#D4DAE2,#727D8B);
  color:#08090B;
  font:700 17px Georgia,serif;
  box-shadow:inset 0 1px 0 #F1F3F6,0 5px 16px rgba(0,0,0,.3);
  transition:filter .2s ease,transform .2s ease;
}
.ancestral-mode .login-card form button[type="submit"]:not(:disabled):hover {filter:brightness(1.08);transform:translateY(-1px)}
.ancestral-mode .login-card .button-subtle {
  display:block;width:100%;min-height:40px;margin:10px 0 0;
  border:1px solid #727D8B;background:#171B21;color:#F1F3F6;
  border-radius:8px;font-size:14px;
}
.ancestral-mode .login-card .button-subtle:hover {background:#28313B;border-color:#D4DAE2}
.ancestral-mode #account-status {font-size:12px;text-align:center;line-height:1.35;min-height:20px;margin:12px 0 2px;overflow-wrap:anywhere;color:#AAB4C0}
.ancestral-mode #panel-register form label {line-height:1.4}
.ancestral-mode #panel-register form label input {margin-top:2px}
@keyframes ancestral-vortex-turn {to{transform:rotate(-360deg)}}
@keyframes ancestral-light-breathe {0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.95;transform:scale(1.075)}}
@keyframes ancestral-rune-pulse {0%,100%{opacity:.3}50%{opacity:.83}}
@keyframes ancestral-dust {0%{opacity:0;transform:translate(0,14px) scale(.6)}20%{opacity:1}70%{opacity:.7}100%{opacity:0;transform:translate(13px,-24px) scale(1.3)}}
@keyframes ancestral-babosa-breathe {0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.015)}}
@keyframes ancestral-luciernaga-hover {0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(5px,-11px) rotate(2deg)}}
@media (max-height:760px) and (min-width:801px) {
  .login-shell.ancestral-mode {padding-top:9px;padding-bottom:9px}
  .login-shell.ancestral-mode .login-card {padding:15px 24px}
  .ancestral-mode .ancestral-emblem {font-size:22px}
  .ancestral-mode .login-card h1 {font-size:35px}
  .ancestral-mode .login-card > .ancestral-welcome {margin-bottom:8px}
  .ancestral-mode .account-panel {margin-top:7px}
  .ancestral-mode .account-panel h2 {margin:4px 0 7px}
  .ancestral-mode .login-card form {gap:6px}
  .ancestral-mode .login-card form label {margin:2px 0}
  .ancestral-mode .login-card .button-subtle {margin-top:7px}
}
@media (max-width:800px) {
  .login-shell.ancestral-mode {align-items:center;justify-content:safe center;padding:14px;}
  .ancestral-legibility {background:rgba(8,9,11,.48)}
  .login-shell.ancestral-mode .login-card {margin-inline:auto;max-width:460px;}
}
@media (max-height:560px) {
  .login-shell.ancestral-mode {align-items:center;justify-content:safe flex-start;}
}
@media (prefers-reduced-motion:reduce) {
  .ancestral-vortex img,.ancestral-portal-light,.ancestral-runes,.ancestral-particles i,
  .ancestral-babosa,.ancestral-luciernaga {animation:none!important;}
  .ancestral-mode .login-card form button[type="submit"] {transition:none}
}
.login-shell.creation-mode .ancestral-scene,
.login-shell.creation-mode .ancestral-legibility {display:none}
.login-shell.creation-mode .ancestral-emblem {display:none}