.login-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.login-loading .login-screen,
.login-loading .login-build {
  visibility: hidden;
  pointer-events: none;
}

.login-loading .login-brand-word,
.login-loading .login-brand-word::before,
.login-loading .login-brand-word::after,
.login-loading .login-brand-cursor { animation-play-state: paused; }

.login-loader {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: clamp(12px, 3vw, 36px);
  color: #bfc6c9;
  background: radial-gradient(ellipse at 16% 22%, #303438 0, transparent 55%),
    radial-gradient(ellipse at 88% 82%, #24292d 0, transparent 60%),
    linear-gradient(135deg, #111518, #080a0c);
  font: 12px/1.6 ui-monospace, "Liberation Mono", Consolas, monospace;
  cursor: default;
}
.login-loader[hidden] { display: none; }
.boot-background { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.login-loader { scrollbar-width: thin; scrollbar-color: #46555f #0e1215; }
.login-loader::-webkit-scrollbar { width: 7px; background: #0e1215; }
.login-loader::-webkit-scrollbar-thumb { background: #46555f; border: 0; box-shadow: none; }
.login-loader::-webkit-scrollbar-button { display: none; }
.login-loader::after {
  z-index: 2;
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #00000018 0 1px, transparent 1px 4px),
    radial-gradient(ellipse, transparent 50%, #00000045);
}
.boot-terminal {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 1 920px;
  min-width: 0;
  margin-block: auto;
  padding: clamp(12px, 2.5vw, 26px);
  border: 1px solid #515b61;
  box-shadow: -1px 0 #5592b533, 1px 0 #ca916433;
  background: linear-gradient(135deg, #121518f5, #090c0ef0);
  outline: none;
}
.boot-terminal:focus-visible { outline: 1px solid #a2afb7; outline-offset: 4px; }
.boot-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; }
.boot-kicker { display: block; font-size: 10px; letter-spacing: .14em; color: #7d8b92; }
.boot-terminal pre { margin: 0; padding: 0; border: 0; box-shadow: none; color: inherit; background: transparent; font: inherit; white-space: pre; }
.boot-terminal .boot-ascii { font-size: clamp(8px, 1.5vw, 12px); line-height: 1.25; color: #e5e9eb; }
.boot-version { display: grid; gap: 3px; font-size: 10px; color: #7d8b92; }
.boot-version b { color: #d1d8db; font-weight: normal; }
.boot-panels { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.boot-terminal .boot-panel { box-sizing: border-box; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid #3c474e; box-shadow: none; }
.boot-terminal legend { padding: 0 6px; margin: 0; color: #a8b8c2; background: #0e1215; font: inherit; }
.boot-panel dl { display: grid; grid-template-columns: 11ch minmax(0,1fr); gap: 4px 10px; margin: 0; }
.boot-panel dt { color: #7b8b95; }
.boot-panel dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #d2d9dd; }
.boot-terminal .boot-console { margin-top: 16px; }
.boot-log { list-style: none; padding: 0; margin: 0; }
.boot-log li { display: grid; grid-template-columns: 7ch 6ch minmax(0,1fr); gap: 8px; padding: 2px 0; }
.boot-timestamp { color: #5f727e; font-variant-numeric: tabular-nums; }
.boot-result { color: #7d8b92; white-space: pre; }
.boot-result::before { content: "["; }
.boot-result::after { content: "]"; }
.boot-log [data-state="ok"] .boot-result { color: #d7e3de; }
.boot-log [data-state="warn"] .boot-result { color: #d0b58d; }
.boot-footer { padding-top: 16px; }
.boot-meter { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; color: #91a1ab; font-size: 11px; }
.boot-terminal p { margin: 8px 0 0; font: inherit; }
#boot-status { color: #91a1ab; font-size: 11px; }
.boot-prompt { padding-top: 12px; color: #d9e1e5; }
.boot-prompt > span:first-child { color: #f0f2f3; }
.boot-continue { display: inline-block; font-size: clamp(10px, 2.7vw, 12px); letter-spacing: 0.025em; animation: netcode-boot-prompt 1.4s steps(1,end) infinite; }
.login-loader[data-state="ready"] .boot-terminal { cursor: pointer; }
@keyframes netcode-boot-prompt { 0%, 65%, 100% { opacity: 1; } 66%, 99% { opacity: 0.3; } }
.boot-caret { animation: netcode-cursor-blink 1.1s steps(1,end) infinite; }
.login-loader[data-state="loading"] .boot-prompt { visibility: hidden; }
@media (max-width: 600px) {
  .login-loader { font-size: 11px; }
  .boot-panels { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .boot-header { gap: 10px; padding-bottom: 12px; }
  .boot-version { grid-template-columns: auto auto; column-gap: 14px; }
  .boot-version > span:last-child { grid-column: 1 / -1; }
  .boot-terminal .boot-panel { padding: 8px 10px 10px; }
  .boot-log li { grid-template-columns: 6ch 6ch minmax(0,1fr); gap: 5px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .login-loader { padding: 10px; font-size: 10px; }
  .boot-terminal { padding: 10px 14px; }
  .boot-terminal .boot-ascii { font-size: 8px; }
  .boot-header { padding-bottom: 8px; }
  .boot-terminal .boot-console { margin-top: 8px; }
  .boot-footer { padding-top: 8px; }
  .boot-prompt { padding-top: 0; }
}

.retro-bleed {
  text-shadow: -1px 0 #78b5ff99, 1px 0 #ffc18499, 3px 0 1px #d9788933;
  animation: netcode-color-bleed 5.4s ease-in-out infinite;
}

@keyframes netcode-color-bleed {
  0%, 100% { text-shadow: -1px 0 #78b5ff99, 1px 0 #ffc18499, 3px 0 1px #d9788933; }
  35% { text-shadow: -1.6px 0 #78b5ffbb, 1.5px 0 #ffc184aa, 4px 0 1px #d9788955; }
  70% { text-shadow: -0.6px 0 #78b5ff88, 2px 0 #ffc184bb, 3px 0 1.5px #d9788944; }
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #00000012 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 75% 70%, #17313644, transparent 65%),
    radial-gradient(ellipse at 20% 20%, #38253a33, transparent 70%);
}

.login-globe {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.login-globe canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.login-screen .login-window {
  position: relative;
  z-index: 1;
}

.login-brand {
  position: absolute;
  z-index: 1;
  top: clamp(24px, 5vh, 64px);
  left: clamp(20px, 4vw, 72px);
  max-width: calc(100% - 40px);
  margin: 0;
  color: #fff;
  font-family: ui-monospace, "Cascadia Mono", "Liberation Mono", Consolas, monospace;
  font-size: clamp(40px, 5.5vw, 92px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.login-brand.is-typing .login-brand-cursor { animation-duration: 550ms; }

.login-brand-cursor {
  display: inline-block;
  margin-left: 0.07em;
  animation: netcode-cursor-blink 1.1s steps(1, end) infinite;
}

@keyframes netcode-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.login-screen .server-banner {
  width: 100%;
  height: auto;
}

.login-screen .server-banner img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 348 / 76;
  object-fit: contain;
}

.login-brand-word {
  position: relative;
  display: inline-block;
  text-shadow: -1px 0 #78b5ff99, 1px 0 #ffc18499, 3px 0 1px #d9788933;
  animation: netcode-color-bleed 5.4s ease-in-out infinite;
}

.login-brand-word::before,
.login-brand-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.login-brand-word::before {
  color: #d4fff6;
  text-shadow: -2px 0 #56ffcf, 2px 0 #67cfff;

}

.login-brand-word::after {
  color: #fff;
  text-shadow: 2px 0 #f88cb6, -2px 0 #80eaff;

}

.login-brand.is-glitching .login-brand-word {
  animation: netcode-logo-signal 900ms steps(1, end) both, netcode-color-bleed 5.4s ease-in-out infinite;
}
.login-brand.is-glitching .login-brand-word::before { animation: netcode-logo-tear-top 900ms steps(1, end) both; }
.login-brand.is-glitching .login-brand-word::after { animation: netcode-logo-tear-bottom 900ms steps(1, end) both; }

@keyframes netcode-logo-signal {
  0%, 100% { transform: none; }
  8%, 34% { transform: translateX(-5px) skewX(-6deg); }
  16%, 46% { transform: translateX(7px) skewX(5deg); }
  26%, 60% { transform: translateX(-1px); }
  76% { transform: translateX(2px) skewX(-1deg); }
}
@keyframes netcode-logo-tear-top {
  0%, 26%, 60%, 100% { opacity: 0; transform: none; }
  8%, 34% { opacity: 0.95; clip-path: inset(17% -10% 60% -10%); transform: translateX(26px); }
  16%, 46% { opacity: 0.8; clip-path: inset(35% -10% 48% -10%); transform: translateX(-22px); }
  76% { opacity: 0.7; clip-path: inset(10% -10% 80% -10%); transform: translateX(8px); }
}
@keyframes netcode-logo-tear-bottom {
  0%, 26%, 60%, 100% { opacity: 0; transform: none; }
  8%, 34% { opacity: 0.9; clip-path: inset(61% -10% 20% -10%); transform: translateX(-24px); }
  16%, 46% { opacity: 0.8; clip-path: inset(78% -10% 10% -10%); transform: translateX(32px); }
  76% { opacity: 0.7; clip-path: inset(52% -10% 32% -10%); transform: translateX(-10px); }
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #0008 2px 4px),
    linear-gradient(0deg, transparent 25%, #b6c8d71a 26% 28%, transparent 29% 70%, #c8bcc81a 71% 73%, transparent 74%);
}
.login-screen.is-glitching::after { animation: netcode-scanline-burst 900ms steps(1,end) both; }
.login-screen.is-glitching .server-banner img { animation: netcode-depth-burst 900ms steps(1,end) both; }
@keyframes netcode-scanline-burst {
  0%, 100% { opacity: 0; transform: none; }
  8%, 34% { opacity: 0.5; transform: translateY(3px); background-size: auto 6px, auto; }
  16%, 46% { opacity: 0.75; transform: translateY(-2px); background-size: auto 9px, auto; }
  26%, 60% { opacity: 0.22; transform: translateY(1px); background-size: auto 4px, auto; }
  76% { opacity: 0.45; transform: translateY(-4px); background-size: auto 7px, auto; }
}
@keyframes netcode-depth-burst {
  0%, 100% { filter: none; }
  8%, 34% { filter: grayscale(.7) contrast(1.65); }
  16%, 46% { filter: grayscale(.4) contrast(1.95) brightness(.85); }
  26%, 60% { filter: grayscale(.2) contrast(1.15); }
  76% { filter: grayscale(.5) contrast(1.4); }
}

.session-entering .login-screen .login-window {
  will-change: transform, opacity, clip-path;
  animation: netcode-login-enter 1500ms linear both;
}

.session-entering .login-window::before,
.session-entering .login-window::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.session-entering .login-window::before {
  inset: -5px;
  border: 1px solid #baffeb;
  box-shadow: 0 0 18px #83f4da55, inset 0 0 14px #83f4da33;
  animation: netcode-login-halo 1500ms ease-out both;
}

.session-entering .login-window::after {
  left: -30%;
  width: 160%;
  height: 2px;
  transform: rotate(-30deg);
  background: linear-gradient(90deg, transparent, #d9fff3, #8ce6ff, transparent);
  box-shadow: 0 0 10px #a6ffdf;
  animation: netcode-login-scan 1500ms linear both;
}

.login-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.login-particles-back { z-index: 0; }
.login-particles-front { z-index: 2; }

@keyframes netcode-login-enter {
  0% { opacity: 0.6; clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0); transform: perspective(1000px) translate3d(-12px, -8px, -45px) rotateX(5deg) rotateY(-6deg); }
  8% { opacity: 1; }
  50% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%, 0 100%); transform: perspective(1000px) translate3d(-3px, -2px, -10px) rotateX(1deg) rotateY(-1.5deg); }
  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); transform: none; }
}

@keyframes netcode-login-halo {
  0% { opacity: 0; transform: scale(1.06); }
  28% { opacity: 0.75; }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes netcode-login-scan {
  0% { top: -50%; opacity: 0; }
  8%, 88% { opacity: 0.8; }
  100% { top: 150%; opacity: 0; }
}

.login-effects-paused .login-brand-word,
.login-effects-paused .login-brand-word::before,
.login-effects-paused .login-brand-word::after,
.login-effects-paused .login-brand-cursor {
  animation-play-state: paused;
}

.login-effects-paused .retro-bleed { animation-play-state: paused; }

@media (max-height: 360px) {
  .login-brand { top: 10px; font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-continue,
  .boot-caret,
  .login-brand-cursor,
  .login-brand-word,
  .login-brand.is-glitching .login-brand-word,
  .retro-bleed,
  .login-screen.is-glitching .server-banner img { animation: none; }
  .login-screen.is-glitching::after,
  .login-brand-word::before,
  .login-brand-word::after,
  .session-entering .login-window::before,
  .session-entering .login-window::after { display: none; animation: none; }
}

/* Returning from the desktop retains preload, without a second firmware prompt. */
.login-return .login-loader{visibility:hidden;pointer-events:none}
.login-return.session-entering .login-screen{animation:netcode-session-return 260ms ease-out}
@keyframes netcode-session-return{from{opacity:0;filter:brightness(1.25)}to{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.login-return.session-entering .login-screen{animation:none}}