/* Tela de entrada: o progresso fica visível como uma cena, nunca como uma linha solta. */
#loadingScreen {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  color: #eef2ff;
  background: #050814;
  font-family: 'Spectral', Georgia, serif;
}

#loadingScreen::before,
#loadingScreen::after {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

#loadingScreen::before {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 42%, #263e78 0%, #101b38 22%, transparent 48%),
    radial-gradient(circle at 12% 88%, #113c3d 0%, transparent 36%),
    radial-gradient(circle at 92% 12%, #38264d 0%, transparent 38%),
    linear-gradient(145deg, #03050d 0%, #0a1125 52%, #050a14 100%);
  animation: loadingSky 14s ease-in-out infinite alternate;
}

#loadingScreen::after {
  z-index: -2;
  opacity: .34;
  background-image: radial-gradient(#aecbff 0 1px, transparent 1.5px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, #fff, transparent 78%);
  animation: loadingDrift 26s linear infinite;
}

.loading-backdrop,
.loading-shell { position: relative; z-index: 1; }
.loading-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.loading-stars { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(#e8f1ff 0 1px, transparent 1.5px); background-size: 127px 111px; animation: loadingDrift 19s linear infinite reverse; }
.loading-orbit { position: absolute; left: 50%; top: 46%; width: min(68vw, 690px); aspect-ratio: 1; border: 1px solid #85b8ff35; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); box-shadow: 0 0 42px #3d8dff22, inset 0 0 42px #3d8dff18; }
.loading-orbit::before { content: ''; position: absolute; inset: 9%; border: 1px dashed #e2c67945; border-radius: inherit; }
.loading-orbit-a { animation: loadingOrbit 22s linear infinite; }
.loading-orbit-b { width: min(52vw, 520px); transform: translate(-50%, -50%) rotate(42deg); border-color: #d7b65b2c; animation: loadingOrbitReverse 17s linear infinite; }
.loading-portal { position: absolute; left: 50%; top: 46%; width: clamp(150px, 22vw, 250px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid #8fc8ff80; border-radius: 50%; background: radial-gradient(circle, #d5eeff1f 0 12%, #528cff12 37%, transparent 69%); box-shadow: 0 0 26px #66b9ff55, 0 0 90px #3d78ff2c, inset 0 0 30px #b7e3ff32; animation: loadingBreathe 3.2s ease-in-out infinite; }
.loading-portal::before, .loading-portal::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; border: 1px solid #f0d58c8a; transform: rotate(35deg); }
.loading-portal::after { inset: 22%; border-color: #94caff75; transform: rotate(-52deg); }
.loading-core { position: absolute; inset: 37%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #97d6ff 28%, #4b8cff 57%, #1b3d92 100%); box-shadow: 0 0 14px #d4f1ff, 0 0 42px #66aaff, 0 0 80px #386dff88; animation: loadingCore 2.2s ease-in-out infinite; }
.loading-rune { position: absolute; color: #f5d891; font-family: 'Cinzel', serif; font-size: clamp(16px, 2vw, 24px); text-shadow: 0 0 12px #ffe59a; }
.loading-rune-a { left: 8%; top: 44%; }.loading-rune-b { right: 9%; top: 22%; }.loading-rune-c { right: 19%; bottom: 13%; }

.loading-shell {
  width: min(720px, calc(100vw - 32px));
  padding: clamp(22px, 4vw, 40px) clamp(20px, 5vw, 58px) clamp(22px, 3vw, 34px);
  border: 1px solid #d9ba6d75;
  border-radius: 24px;
  background: linear-gradient(145deg, #0a1225e8, #0b1324d9 55%, #091e2be3);
  box-shadow: 0 26px 90px #000b, inset 0 1px #ffffff18, 0 0 0 1px #182744;
  backdrop-filter: blur(10px);
  text-align: center;
  overflow: hidden;
}
.loading-shell::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #f0d48a, #7ebaff, #f0d48a, transparent); box-shadow: 0 0 18px #8ac4ff; animation: loadingSweep 2.4s ease-in-out infinite; }
.loading-brand { display: inline-flex; align-items: center; gap: 9px; color: #f6d890; font: 700 clamp(14px, 2vw, 18px)/1 'Cinzel', serif; letter-spacing: .28em; text-shadow: 0 0 18px #e4b95a66; }
.loading-brand-mark { color: #8ecbff; font-size: 1.2em; animation: loadingTwinkle 1.8s ease-in-out infinite; }
.loading-heading { margin-top: 18px; }.loading-kicker { display: block; color: #9db4d7; font: 600 11px/1.4 'Cinzel', serif; letter-spacing: .23em; text-transform: uppercase; }
.load-zone { margin: 7px 0 0; color: #ffe9a8; font: 700 clamp(24px, 4vw, 36px)/1.1 'Cinzel', serif; letter-spacing: .08em; text-shadow: 0 2px 14px #000, 0 0 20px #d7ac4a40; }
.loading-subtitle { margin: 8px 0 0; color: #b8c6dc; font-size: clamp(12px, 1.8vw, 15px); }
.load-art { position: relative; width: min(100%, 570px); height: clamp(100px, 16vw, 148px); margin: 22px auto 18px; overflow: hidden; border: 1px solid #6e9bcf38; border-radius: 16px; background: linear-gradient(to bottom, #192a4d44, #0b2130 65%, #0b1b1b); box-shadow: inset 0 -18px 36px #071012, 0 12px 28px #0007; }
.load-art::after { content: none; }
.load-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 12%, #c6e6ff10 38%, transparent 58%), radial-gradient(ellipse at 50% 98%, #4c843653, transparent 58%); animation: loadingLight 7s ease-in-out infinite alternate; }
.load-art-ground { position: absolute; left: -5%; right: -5%; bottom: -45%; height: 90%; border-radius: 50% 50% 0 0; background: linear-gradient(#416a3e, #162c27 65%); transform: rotate(-2deg); box-shadow: 0 -5px 20px #9bdb8a2b; }
.load-art-mountain { position: absolute; bottom: 31px; width: 0; height: 0; border-left: 86px solid transparent; border-right: 86px solid transparent; border-bottom: 112px solid #1b3353; filter: drop-shadow(0 5px 9px #0008); }
.load-art-mountain::after { content: ''; position: absolute; left: -22px; top: 32px; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 29px solid #a8c5df4c; }
.load-art-mountain-a { left: 18%; transform: scale(.9); }.load-art-mountain-b { right: 13%; transform: scale(.65) translateY(20px); border-bottom-color: #244767; }
.load-art-tree { position: absolute; bottom: 23px; width: 9px; height: 52px; border-radius: 5px; background: #1b1715; z-index: 2; }.load-art-tree::before, .load-art-tree::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-left: 29px solid transparent; border-right: 29px solid transparent; border-bottom: 53px solid #173d36; }.load-art-tree::before { bottom: 22px; }.load-art-tree::after { bottom: 3px; border-left-width: 36px; border-right-width: 36px; border-bottom-color: #102f2b; }
.load-art-tree-a { left: 8%; }.load-art-tree-b { right: 7%; transform: scale(.75); transform-origin: bottom; }
.loading-status-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 24px; text-align: left; }.load-tip { min-width: 0; overflow: hidden; color: #c2cee2; font-size: clamp(12px, 1.8vw, 15px); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.loading-status-row strong { flex: 0 0 auto; color: #ffe9a8; font: 700 15px/1 'Cinzel', serif; }
.load-bar { position: relative; width: 100%; height: 17px; margin-top: 8px; overflow: hidden; border: 1px solid #d5af5c8c; border-radius: 999px; background: #030711e8; box-shadow: inset 0 2px 5px #000c, 0 0 0 3px #071224, 0 0 24px #4d98ff24; }.load-bar::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 10px #77a9ff22; pointer-events: none; }.load-bar > #loadFill { position: relative; z-index: 1; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9d6c20, #f9e29b 48%, #83caff); box-shadow: 0 0 16px #d5b25c; transition: width .25s ease-out; }
body.loading-ativo #loadFill { background-size: 220% 100%; animation: loadShimmer 1.3s linear infinite; }
.loading-pulse { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }.loading-pulse span { width: 6px; height: 6px; border-radius: 50%; background: #83caff; box-shadow: 0 0 9px #83caff; animation: loadingDot 1.2s ease-in-out infinite; }.loading-pulse span:nth-child(2) { animation-delay: .18s; background: #f5d890; box-shadow: 0 0 9px #f5d890; }.loading-pulse span:nth-child(3) { animation-delay: .36s; }
#loadingScreen.is-complete .loading-shell { border-color: #9be4bd; }#loadingScreen.has-error .loading-shell { border-color: #e48585; }#loadingScreen.has-error .loading-pulse span { background: #ff9a9a; box-shadow: 0 0 9px #ff7070; }

@keyframes loadingSky { from { transform: scale(1); filter: hue-rotate(0deg); } to { transform: scale(1.08); filter: hue-rotate(12deg); } }
@keyframes loadingDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-34px, 18px, 0); } }
@keyframes loadingOrbit { to { transform: translate(-50%, -50%) rotate(342deg); } }
@keyframes loadingOrbitReverse { to { transform: translate(-50%, -50%) rotate(-318deg); } }
@keyframes loadingBreathe { 50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 40px #66b9ff70, 0 0 110px #3d78ff42, inset 0 0 45px #b7e3ff45; } }
@keyframes loadingCore { 50% { transform: scale(.72); filter: brightness(1.35); } }
@keyframes loadingSweep { 50% { opacity: .35; transform: translateX(28%); } }
@keyframes loadingTwinkle { 50% { opacity: .45; transform: rotate(90deg) scale(1.2); } }
@keyframes loadingLight { to { transform: translateX(20%); } }
@keyframes loadingDot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes loadShimmer { from { background-position: 0 0; } to { background-position: 220% 0; } }

@media (orientation: landscape) and (max-height: 560px) {
  .loading-shell { display: grid; grid-template-columns: minmax(145px, .55fr) minmax(280px, 1.45fr); grid-template-areas: 'brand heading' 'art status' 'art bar' 'art pulse'; column-gap: clamp(18px, 4vw, 44px); align-items: center; padding: 18px clamp(20px, 5vw, 54px); }
  .loading-brand { grid-area: brand; justify-self: start; align-self: end; }.loading-heading { grid-area: heading; margin-top: 0; text-align: left; }.loading-kicker { font-size: 9px; }.load-zone { font-size: clamp(20px, 4vh, 32px); }.loading-subtitle { font-size: 12px; }.load-art { grid-area: art; width: 100%; height: clamp(105px, 27vh, 170px); margin: 12px 0 0; }.loading-status-row { grid-area: status; width: 100%; align-self: end; }.load-bar { grid-area: bar; margin-top: 0; }.loading-pulse { grid-area: pulse; margin-top: 6px; justify-self: center; }
}
@media (max-width: 500px) {
  .loading-shell { width: calc(100vw - 20px); padding: 20px 16px 18px; border-radius: 18px; }.loading-subtitle { font-size: 12px; }.loading-orbit { width: 100vw; }.loading-orbit-b { width: 76vw; }.loading-status-row { gap: 8px; }.load-tip { font-size: 12px; }.loading-portal { width: 155px; }
}
@media (prefers-reduced-motion: reduce) {
  #loadingScreen *, #loadingScreen::before, #loadingScreen::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}