html { color-scheme: dark; }
body {
  background: #100d08 url('/images/login-volcanic-v1.webp') center center / cover fixed no-repeat;
  color: #e8dcc8;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body::before, body::after { content: none; }
.login-shell {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 36px 20px 80px;
  place-items: center;
}
.login-card {
  box-sizing: border-box;
  isolation: isolate;
  position: relative;
  width: min(100%, 806px);
  min-height: 560px;
  padding: 34px 42px 32px;
  border: 1px solid #d69b43;
  border-radius: 23px;
  background: linear-gradient(110deg, #100e0b30, #08090955 75%), url('/images/login-panel-texture-v1.webp') center / cover;
  box-shadow: inset 0 0 0 1px #ffe1a629, inset 0 0 24px #c9761220, 0 18px 65px #0009, 0 0 15px #ff9e252b;
}
.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url('/images/login-contours-v1.svg') left center / cover;
  opacity: .5;
  pointer-events: none;
}
.login-brand-shell {
  display: block;
  width: min(100%, 442px);
  max-width: 100%;
  padding: 0;
  margin: 0 auto 23px;
  border: 0;
  border-radius: 7px;
  background: none;
  box-shadow: 0 7px 12px #0009;
}
.login-brand-shell::before, .login-brand-shell::after { content: none; }
.login-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 7px;
  filter: none;
}
.login-card-inner {
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 34px;
  text-align: left;
}
.steam-mark {
  width: 204px;
  height: 204px;
  padding: 5px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid #e9a23f;
  background: linear-gradient(140deg, #f7bd5d, #160d07 35%, #ffb136 75%, #59310f);
  box-shadow: 0 0 0 4px #301b0b, 0 0 0 6px #9c622e66, 0 0 25px #e77c214f, inset 0 0 8px #000;
}
.steam-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; filter: none; }
.login-copy { min-width: 0; }
#login-title {
  margin: 0 0 7px;
  font: 700 32px/1.15 Georgia, 'Times New Roman', serif;
  color: #e7d7bf;
  text-shadow: 0 2px 3px #000;
}
.login-subtitle { margin: 0 0 20px; max-width: none; color: #ddd0b9; font-size: 17px; line-height: 1.55; }
.login-actions { margin: 0 0 19px; }
#steam-login-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: min(100%, 355px);
  min-height: 61px;
  padding: 7px 20px;
  border: 1px solid #208de5;
  border-radius: 11px;
  color: #f0f5ff;
  background: linear-gradient(180deg, #113e7e, #071935);
  box-shadow: inset 0 0 13px #2485f33d, 0 0 13px #1578dc40;
  font: 650 20px/1.2 system-ui, sans-serif;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#steam-login-button img { flex: 0 0 42px; border-radius: 50%; }
.login-button-arrow { margin-left: auto; font-size: 26px; font-weight: 300; }
#steam-login-button:hover:not([aria-disabled='true']) {
  transform: translateY(-2px);
  border-color: #7acbff;
  box-shadow: inset 0 0 16px #2485f355, 0 0 22px #1578dc70;
}
#steam-login-button:focus-visible { outline: 2px solid #c5eaff; outline-offset: 5px; }
.login-assurance { margin: 0; max-width: none; gap: 11px; color: #c7bfae; font-size: 12px; line-height: 1.5; }
.login-assurance-icon { width: 20px; height: 20px; border-color: #df9b22; color: #ffb92e; font: 700 15px/1 Georgia, serif; }
#steam-auth-status {
  position: relative;
  margin: 22px 0 0;
  min-height: 53px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 52px;
  border: 1px solid #9c692b;
  border-radius: 14px;
  background: linear-gradient(90deg, #11130ee6, #12110dc7);
  box-shadow: inset 0 0 12px #d78b1520;
  color: #d9ceba;
  font-size: 14px;
  line-height: 1.5;
}
#steam-auth-status::before {
  content: '';
  position: absolute;
  left: 23px;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  background: #a6ec80;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #72c15129, 0 0 12px #a6ec8070;
}
.login-card:has(#steam-login-button[aria-disabled='true']) #steam-auth-status::before { background: #eab35b; box-shadow: 0 0 10px #d6913f66; }
#steam-auth-details { max-width: 100%; box-sizing: border-box; color: #e0c9a5; border-color: #98632f80; background: #100c09ed; }
@media (max-width: 720px) {
  .login-shell { padding: 24px 16px; }
  .login-card { padding: 26px 24px; }
  .login-card-inner { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .steam-mark { width: 145px; height: 145px; }
  #login-title { font-size: 29px; }
  .login-subtitle { font-size: 15px; }
  .login-actions { justify-content: center; }
  .login-assurance { text-align: left; }
  #steam-auth-status { font-size: 12px; }
}
@media (max-width: 380px) {
  .login-shell { padding: 16px 10px; }
  .login-card { padding: 22px 16px; }
  #steam-login-button { font-size: 16px; gap: 8px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { #steam-login-button { transition: none; } }