/* Experiência noturna do login e da transição para o mundo. */

html[data-theme="dark"] #auth-screen {
  --auth-blue: #58cfe0;
  --auth-teal: #48c9ad;
  --auth-green: #78e3b5;
  --auth-paper: rgba(7, 7, 9, .96);
  --auth-line: rgba(120, 227, 181, .2);
  background: #000 url('/assets/brand/ultimate-poke-idle/login-night-journey-v2.webp') center / cover no-repeat !important;
}

html[data-theme="dark"] #auth-screen .scrim {
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .97) 18%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .22) 54%, rgba(0, 0, 0, .05) 74%),
    linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, transparent 24%),
    linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, transparent 18%);
}

html[data-theme="dark"] #auth-screen .ip-logo img {
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .86));
}

html[data-theme="dark"] #auth-screen .tag {
  color: #b8f4db;
  filter: drop-shadow(0 3px 12px #000);
}

html[data-theme="dark"] #auth-screen .launch-countdown-card {
  border-color: rgba(120, 227, 181, .22) !important;
  background: linear-gradient(120deg, rgba(11, 11, 13, .94), rgba(3, 3, 4, .96)) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] #auth-screen .launch-countdown-card::before,
html[data-theme="dark"] #auth-screen .card::before,
html[data-theme="dark"] #auth-screen .auth-kicker span {
  background: linear-gradient(180deg, #58cfe0, #78e3b5) !important;
}

html[data-theme="dark"] #auth-screen .launch-badge {
  border-color: rgba(120, 227, 181, .26);
  background: rgba(72, 201, 173, .1);
  color: #aef2d5;
}

html[data-theme="dark"] #auth-screen :is(.event-title, .auth-kicker, .field-label, .eye, .row a) {
  color: #78e3b5;
}

html[data-theme="dark"] #auth-screen .event-desc { color: #c9cbcf; }
html[data-theme="dark"] #auth-screen .event-desc b { color: #f3d47a; }

html[data-theme="dark"] #auth-screen .card {
  border-color: rgba(120, 227, 181, .16) !important;
  background: linear-gradient(145deg, rgba(11, 11, 13, .97), rgba(2, 2, 3, .98)) !important;
  box-shadow: 0 34px 84px rgba(0, 0, 0, .74), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] #auth-screen .card::after {
  background: radial-gradient(circle, rgba(120, 227, 181, .08), transparent 68%);
}

html[data-theme="dark"] #auth-screen .hd::before {
  background-color: #111315;
  box-shadow: inset 0 0 0 1px rgba(120, 227, 181, .16), 0 10px 24px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] #auth-screen .field,
html[data-theme="dark"] #auth-screen .field:focus-within {
  border-color: rgba(255, 255, 255, .11) !important;
  background: #0b0b0d !important;
}

html[data-theme="dark"] #auth-screen .field:focus-within {
  border-color: rgba(120, 227, 181, .48) !important;
  box-shadow: 0 0 0 4px rgba(120, 227, 181, .08) !important;
}

html[data-theme="dark"] #auth-screen .field::before {
  background: linear-gradient(145deg, #18191b, #10271f) !important;
}

html[data-theme="dark"] #auth-screen .field > .ic { color: #63d6b0; }
html[data-theme="dark"] #auth-screen .field input::placeholder { color: #777b80; }
html[data-theme="dark"] #auth-screen .eye.is-active { color: #f3d47a; }

html[data-theme="dark"] #auth-screen .btn.enter {
  border: 1px solid rgba(143, 240, 204, .18);
  background: linear-gradient(100deg, #187d71, #209a94 55%, #289d6b);
  color: #f8fffc;
  box-shadow: 0 14px 30px rgba(29, 151, 125, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html[data-theme="dark"] #auth-screen .btn.create {
  border-color: rgba(120, 227, 181, .28);
  background: #080809;
  color: #cef8e4;
}

html[data-theme="dark"] #auth-screen .btn.create:hover {
  border-color: rgba(120, 227, 181, .54);
  background: #101512;
  color: #fff;
}

html[data-theme="dark"] #auth-screen :is(.lang, .auth-menu-music) {
  border-color: rgba(120, 227, 181, .18);
  background: rgba(7, 7, 9, .82);
  color: #d7eee4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] #auth-screen .lang .chev { color: #78e3b5; }

html[data-theme="dark"] #auth-screen :is(.abar .mid, .abar .right) {
  border-color: rgba(120, 227, 181, .14) !important;
  background: rgba(7, 7, 9, .9) !important;
  backdrop-filter: blur(18px);
}

/* Loading principal: arte dedicada, feedback real de fase e superfícies OLED. */
#boot-overlay {
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: #000 url('/assets/brand/ultimate-poke-idle/loading-night-route-v2.webp') center / cover no-repeat !important;
  color: #f7f7f8;
}

#boot-overlay::after {
  background:
    radial-gradient(54% 58% at 50% 49%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .58) 74%, rgba(0, 0, 0, .86)),
    linear-gradient(0deg, rgba(0, 0, 0, .84), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .46), transparent 24%) !important;
}

#boot-overlay .boot-embers i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 2px !important;
  background: radial-gradient(circle, #d8fff1 8%, #78e3b5 48%, transparent 72%) !important;
  box-shadow: 0 0 12px 3px rgba(88, 207, 224, .26) !important;
}

#boot-overlay .boot-center {
  width: min(92vw, 430px);
  padding: 29px 31px 27px;
  border: 1px solid rgba(120, 227, 181, .18);
  border-radius: 28px 10px 28px 28px;
  background: linear-gradient(145deg, rgba(10, 10, 12, .89), rgba(1, 1, 2, .94));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px) saturate(1.08);
}

.boot-emblem {
  position: relative;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
}

.boot-emblem::before,
.boot-emblem::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.boot-emblem::before {
  inset: 0;
  border: 1px solid rgba(120, 227, 181, .2);
  border-top-color: #78e3b5;
  border-right-color: #58cfe0;
  animation: boot-orbit 2.4s linear infinite;
}

.boot-emblem::after {
  inset: 10px;
  border: 1px dashed rgba(255, 255, 255, .11);
  animation: boot-orbit 5.5s linear infinite reverse;
}

.boot-loader-ball {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border: 3px solid #d9eee6;
  border-radius: 50%;
  background: linear-gradient(180deg, #48c9ad 0 44%, #050506 44% 56%, #e7f1ed 56% 100%);
  box-shadow: 0 0 28px rgba(120, 227, 181, .18);
}

.boot-loader-ball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid #050506;
  border-radius: 50%;
  background: #d8fff1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #d9eee6, 0 0 14px rgba(120, 227, 181, .46);
}

.boot-kicker {
  color: #78e3b5;
  font: 800 9px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

#boot-title {
  margin-top: 8px;
  color: #f7f7f8;
  font: 800 22px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: -.025em;
  text-shadow: none;
}

.boot-progress {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: #171719;
}

#boot-progress-fill {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58cfe0, #78e3b5 70%, #f3d47a);
  box-shadow: 0 0 16px rgba(120, 227, 181, .28);
  transition: width .28s ease;
}

.boot-progress.is-indeterminate #boot-progress-fill {
  width: 34%;
  animation: boot-progress-scan 1.25s ease-in-out infinite;
}

#boot-status {
  margin-top: 11px;
  color: #b6b7bb;
  font: 600 11px/1.4 "Inter", system-ui, sans-serif;
  letter-spacing: .01em;
  text-align: center;
}

#boot-err-msg {
  color: #ff9b8e;
  font-size: 11px;
}

#boot-overlay.has-error .boot-emblem::before { border-top-color: #ff9b8e; border-right-color: #ff9b8e; }
#boot-overlay.has-error #boot-progress-fill { background: #ff786a; box-shadow: 0 0 14px rgba(255, 120, 106, .24); }

@keyframes boot-orbit { to { transform: rotate(360deg); } }
@keyframes boot-progress-scan {
  from { transform: translateX(-112%); }
  to { transform: translateX(310%); }
}

@media (max-width: 820px) {
  html[data-theme="dark"] #auth-screen {
    background-position: 72% center !important;
  }

  html[data-theme="dark"] #auth-screen .scrim {
    background:
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .97) 46%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .32)),
      linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .12));
  }

  #boot-overlay { background-position: 50% center !important; }
  #boot-overlay .boot-center { width: min(94vw, 390px); padding: 25px 24px 23px; }
  .boot-emblem { width: 84px; height: 84px; }
  .boot-loader-ball { width: 48px; height: 48px; }
  #boot-title { font-size: 20px; }
}

@media (max-width: 500px) {
  #boot-overlay .boot-center { border-radius: 22px 8px 22px 22px; }
  .boot-kicker { font-size: 8px; }
  #boot-title { font-size: 18px; }
  #boot-status { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #boot-overlay .boot-embers i,
  .boot-emblem::before,
  .boot-emblem::after,
  .boot-progress.is-indeterminate #boot-progress-fill {
    animation: none !important;
  }

  #boot-overlay .boot-embers { display: none; }
  #boot-progress-fill { transition: none; }
  .boot-progress.is-indeterminate #boot-progress-fill { width: 58%; transform: none; }
}