/* =====================================================
   Windows XP Login Screen
   ===================================================== */

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
}

.login-screen {
  width: 100vw;
  height: 100vh;
  background: #4a6ecc; /* XP login medium periwinkle blue */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Top banner */
.login-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to right, #0c1e78, #1535a8, #0c1e78);
  border-bottom: 3px solid #b8920a; /* gold divider, like XP */
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: visible;
}

.login-banner-logo {
  flex-shrink: 0;
  font-family: 'Arial Black', Impact, Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 48px;
  line-height: 1;
}

/* Per-letter gradient colouring — inline (not inline-block) so the
   element box follows the inline layout; padding-right gives the
   background area room to cover the italic ink overhang */
.mb-m, .mb-b {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mb-m {
  background-image: linear-gradient(to bottom, #f25022 50%, #00a4ef 50%);
  padding-right: 0.15em;
}
.mb-b {
  background-image: linear-gradient(to bottom, #7fba00 50%, #ffb900 50%);
  padding-right: 0.1em;
}

.login-banner-text {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,20,0.6);
}

.login-banner-text span {
  font-weight: normal;
  color: #a8c8f8;
}

/* Bottom strip */
.login-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to right, #0c1e78, #1535a8, #0c1e78);
  border-top: 3px solid #b8920a; /* gold divider, like XP */
  padding: 10px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  color: #a8c8f8;
  font-size: 11px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a8c8f8;
  text-decoration: none;
  font-size: 13px;
  font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
  padding: 6px 16px;
  border: 1px solid rgba(168, 200, 248, 0.3);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.social-link:hover {
  background: rgba(168, 200, 248, 0.15);
  color: #fff;
}
.social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Main content area */
.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.login-prompt {
  color: #c8dcf8;
  font-size: 14px;
  font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
  margin-bottom: 24px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* User card */
.login-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 40px 28px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(168,200,248,0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  backdrop-filter: blur(4px);
}

.login-user-card:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.login-user-card:active {
  transform: translateY(0);
  background: rgba(255,255,255,0.1);
}

.login-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid rgba(168,200,248,0.7);
  object-fit: cover;
  background: #1a3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.login-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-username {
  color: #fff;
  font-size: 18px;
  font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.login-click-hint {
  color: #a8c8f8;
  font-size: 12px;
  font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Fade-out transition */
.login-screen.fade-out {
  animation: fadeToBlack 0.6s ease forwards;
}

@keyframes fadeToBlack {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =====================================================
   Mobile overrides (≤ 767px)
   ===================================================== */
@media (max-width: 767px) {
  /* Allow the page to scroll so the footer is always reachable
     even when the browser's own chrome (address bar / home bar) is visible */
  html, body { height: auto; overflow-y: auto; }

  .login-screen {
    height: auto;
    min-height: 100svh; /* svh = small viewport height — always clears browser chrome */
    padding: 80px 0 0; /* top padding for fixed banner; footer provides its own */
    justify-content: flex-start;
  }

  /* Fix banner at the top so it stays visible while scrolling */
  .login-banner {
    position: fixed;
    padding: 10px 16px;
    gap: 10px;
    z-index: 10;
  }
  .login-banner-logo { font-size: 30px; }
  .login-banner-text { font-size: 18px; }

  /* Move footer into normal document flow — no longer absolutely pinned */
  .login-footer {
    position: relative;
    bottom: auto;
    width: 100%;          /* span full width, not just button width */
    align-self: stretch;  /* override parent's align-items: center */
    padding: 12px 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
  }
  .social-link { font-size: 12px; padding: 6px 12px; }

  /* Centre the user card vertically in the remaining space */
  .login-content { margin: auto; }
}