/* Accueil de la Citadelle : styles limités à l'écran de démarrage. */
#screen-title {
  max-width: none;
  width: 100%;
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  background: #0a1420;
  color: #f3ead9;
}

#screen-title .splash-visual { position: fixed; }

#screen-title .splash-art {
  display: block;
  object-position: 65% center;
  transform: none;
  animation: none;
}

#screen-title .splash-vignette {
  background:
    linear-gradient(90deg, #071321ed 0%, #0a182bc7 23%, #10233862 43%, #1327390a 65%),
    linear-gradient(0deg, #07101bf0 0%, #0b172440 24%, transparent 55%, #07152628 100%);
}

#screen-title .splash-magic { opacity: .09; }
#screen-title .splash-magic::before,
#screen-title .splash-magic::after { display: none; }

#screen-title .splash-content {
  position: relative;
  flex: 1 0 auto;
  width: min(46%, 760px);
  min-height: 100%;
  margin-left: 3%;
  padding: max(44px, env(safe-area-inset-top)) 26px max(36px, env(safe-area-inset-bottom));
  justify-content: center;
  gap: clamp(24px, 5vh, 54px);
}

#screen-title .startup-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#screen-title .title-logo-wrap {
  width: 100%;
  max-width: 660px;
  aspect-ratio: auto;
  margin: 0;
  animation: none;
}

#screen-title .title-logo-wrap::before { display: none; }

#screen-title .title-banner {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  filter: drop-shadow(0 5px 12px #030a13a6);
}

/* Le fond noir du logo se fond dans le paysage, sans rogner les pointes des lettres. */
#screen-title .title-logo-forge {
  isolation: auto;
  mix-blend-mode: screen;
}
#screen-title .title-logo-forge .title-banner {
  filter: none;
}

#screen-title .tagline {
  margin: 19px 0 23px;
  color: #e8dcc7;
  font: normal clamp(.9375rem, 1.1vw, 1.1875rem)/1.6 Georgia, 'Times New Roman', serif;
  letter-spacing: .045em;
  text-wrap: balance;
  text-shadow: 0 2px 12px #030912;
}

#screen-title .startup-rule {
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4b57c, transparent);
}

#screen-title .startup-rule::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  margin: -2px auto 0;
  transform: rotate(45deg);
  background: #d4b57c;
}

#screen-title .startup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 350px);
}

#screen-title .launch-loader { width: 100%; margin: 0 0 21px; }
#screen-title .launch-loader-line { color: #c9d3db; font-size: .8125rem; line-height: 1.5; text-align: left; }
#screen-title .launch-loader-line strong { color: #e4c58c; font-weight: 500; }
#screen-title .launch-track {
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #c3d4e226;
  box-shadow: none;
}
#screen-title .launch-track span { background: linear-gradient(90deg, #5b9fbc, #acdcec 60%, #e3c48c); box-shadow: 0 0 13px #91d6f04d; }

#screen-title .login-btn {
  width: 100%;
  min-height: 58px;
  padding: 15px 16px;
  gap: 12px;
  border: 1px solid #ead3a3;
  border-radius: 3px;
  background: linear-gradient(120deg, #b99452, #ecd8ac 55%, #c6a265);
  box-shadow: inset 0 0 0 3px #62482026, 0 6px 24px #030a165c;
  color: #1a2530;
  font: 600 .875rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .11em;
  animation: none;
  transition: filter .2s, transform .2s;
}
#screen-title .login-btn:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
#screen-title .login-btn:not(:disabled):active { transform: translateY(1px); }
#screen-title .login-btn:disabled { opacity: .5; }
#screen-title .login-icon .vf-icon { width: 23px; height: 23px; }
#screen-title .proto-note { margin: 14px 0 12px; color: #b7c3ce; font-size: .8125rem; line-height: 1.55; text-wrap: balance; }

#screen-title .acct-title-btn {
  min-height: 44px;
  margin-top: 0;
  padding: 8px 16px;
  border: 1px solid #af997044;
  border-radius: 3px;
  background: #0b18256b;
  color: #ddd4c3;
  font-size: .875rem;
  opacity: 1;
}
#screen-title .acct-title-btn:hover { border-color: #d3b9809c; background: #152b3aa8; }
#screen-title .loading-music-control { min-height: 44px; margin-top: 12px; padding: 8px 10px; border-color: transparent; border-radius: 3px; background: transparent; box-shadow: none; color: #c3d0da; }
#screen-title .loading-music-control:hover { background: #1023357a; border-color: #bbd5e244; }
#screen-title .loading-music-control[data-state='playing'] { color: #e5ce9e; border-color: #b89b604d; }
#screen-title button:focus-visible { outline: 2px solid #f1d9a6; outline-offset: 5px; }

@media (min-width: 1800px) {
  #screen-title .splash-content { margin-left: 4%; }
  #screen-title .startup-actions { width: 380px; }
  #screen-title .login-btn { min-height: 64px; font-size: .9375rem; }
}

@media (max-width: 1100px) and (orientation: portrait) {
  #screen-title .splash-content {
    width: 100%;
    margin-left: 0;
    padding: max(30px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
    justify-content: space-between;
    gap: 70px;
  }
  #screen-title .startup-brand { width: min(100%, 520px); }
  #screen-title .title-banner { max-height: 195px; }
  #screen-title .splash-art { object-position: 66% center; }
  #screen-title .splash-vignette { background: linear-gradient(180deg, #071321c9 0%, #0c1d306b 23%, #1326380a 40%, #0b1a297a 59%, #07121ef2 85%, #07121e 100%); }
  #screen-title .tagline { margin: 12px 0 18px; font-size: .9375rem; }
  #screen-title .startup-rule { width: 110px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  #screen-title .splash-content { padding-top: 22px; padding-bottom: 22px; gap: 18px; width: min(52%, 650px); margin-left: 1%; }
  #screen-title .title-banner { max-height: 135px; }
  #screen-title .tagline { margin: 8px 0 12px; font-size: .875rem; }
  #screen-title .startup-actions { width: min(100%, 320px); }
  #screen-title .launch-loader { margin-bottom: 12px; }
  #screen-title .login-btn { min-height: 48px; padding: 11px; font-size: .8125rem; }
  #screen-title .proto-note { margin: 9px 0 5px; }
  #screen-title .loading-music-control { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-title *, #screen-title *::before, #screen-title *::after { animation: none !important; transition: none !important; }
}