#boot-overlay {
  padding: clamp(24px, 5vw, 84px);
  background:
    radial-gradient(circle at 18% 46%, rgba(232, 160, 42, .13), transparent 30%),
    radial-gradient(circle at 76% 12%, rgba(59, 84, 128, .13), transparent 28%),
    linear-gradient(118deg, #090b0f 0%, #0b0e14 55%, #080b12 100%);
}

#boot-overlay.hidden {
  visibility: hidden;
  pointer-events: none !important;
}

#boot-overlay::before,
#boot-overlay::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#boot-overlay::before {
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

#boot-overlay::after {
  left: 7%;
  bottom: 8%;
  width: 38vw;
  height: 38vw;
  border: 1px solid rgba(240, 176, 59, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(240,176,59,.018), 0 0 0 140px rgba(240,176,59,.012);
}

.boot-card {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  align-items: center;
  gap: clamp(60px, 10vw, 150px);
  margin: auto;
  text-align: left;
}

.game-login-brand { min-height: 180px; max-width: 660px; display: flex; align-items: center; justify-content: center; }
.game-brand-lockup { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(70px, 12vh, 150px); }
.game-brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #241706;
  background: linear-gradient(145deg, #ffd36c, #d48616);
  box-shadow: 0 15px 44px rgba(218, 139, 25, .2);
  font-size: 27px;
  font-weight: 950;
}
.game-brand-lockup b,
.game-brand-lockup small { display: block; }
.game-brand-lockup b { color: #f5f7fb; font-size: 17px; letter-spacing: .14em; }
.game-brand-lockup small { margin-top: 3px; color: #687386; font-size: 9px; letter-spacing: .19em; }
.game-brand-kicker,
.game-login-kicker { margin: 0 0 13px; color: #f0ae37; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.boot-title {
  margin: 0;
  color: #f2b33d;
  font-size: clamp(52px, 6vw, 86px);
  line-height: .96;
  letter-spacing: .04em;
  text-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.game-brand-copy { margin: 0; color: #929cad; font-size: 17px; line-height: 1.85; }
.game-brand-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.game-brand-features span { padding: 7px 11px; border: 1px solid rgba(241,177,60,.16); border-radius: 99px; color: #aeb6c4; background: rgba(241,177,60,.035); font-size: 10px; letter-spacing: .08em; }

#web-login,
#boot-progress {
  width: 100%;
  padding: 34px;
  border: 1px solid #283246;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(19,26,39,.96), rgba(13,18,29,.96));
  box-shadow: 0 28px 85px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(20px);
}
#web-login { display: block; }
.game-login-status { margin-bottom: 27px; color: #55d6aa; font-size: 11px; }
.game-login-status span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #39d5a0; box-shadow: 0 0 0 5px rgba(57,213,160,.1); }
#web-login h2 { margin: 0 0 7px; color: #f2f5fa; font-size: 29px; letter-spacing: -.03em; }
.game-login-subtitle { margin: 0 0 25px; color: #778397; font-size: 13px; }
#web-zone-wrap,
.game-login-field { display: grid; gap: 8px; margin: 0 0 16px; color: #aeb8c8; font-size: 12px; font-weight: 750; }
#web-zone-wrap > span,
.game-login-field > span { padding: 0; color: #aeb8c8; font-size: 12px; }
#web-login input,
#web-login select {
  height: 48px;
  border: 1px solid #303b50;
  border-radius: 9px;
  color: #edf2f8;
  background: #0b111b;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.22);
}
#web-login input::placeholder { color: #566277; }
#web-login input:focus,
#web-login select:focus { border-color: #e4a331; box-shadow: 0 0 0 3px rgba(228,163,49,.12); }
#web-zone-status { min-height: 16px; padding: 0 2px; color: #657287; font-size: 10px; }
#web-login-button {
  width: 100%;
  height: 50px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9px;
  color: #211504;
  background: linear-gradient(135deg, #f7c354, #e39721);
  box-shadow: 0 10px 28px rgba(221,142,27,.19);
  font-weight: 900;
}
#web-login-button i { font-size: 19px; font-style: normal; transition: transform .18s; }
#web-login-button:hover:not(:disabled) i { transform: translateX(3px); }
#web-login-button:active { transform: translateY(1px); box-shadow: 0 6px 18px rgba(221,142,27,.16); }
.game-login-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #242d3d; font-size: 10px; }
.game-login-links a { color: #efb245; font-size: 10px; font-weight: 750; }
.game-login-links span { color: #667286; }
#web-login-error { min-height: 18px; margin-top: 12px; color: #ff8f9e; font-size: 11px; }
#boot-progress { grid-column: 2; color: #dfe5ee; }
#boot-progress .boot-track { border: 1px solid #4f3b18; background: #090d14; }
#boot-progress #boot-bar { background: linear-gradient(90deg, #d78a1d, #ffd469); }
#debug-hint { grid-column: 2; margin-top: -36px; color: #4f5a6c; text-align: center; font-size: 10px; }

@media (max-width: 860px) {
  #boot-overlay { padding: 22px; }
  .boot-card { max-width: 430px; grid-template-columns: 1fr; gap: 16px; }
  .game-login-brand { min-height: auto; display: flex; padding: 8px 0 14px; }
  .boot-title { font-size: clamp(42px, 13vw, 62px); }
  #boot-progress,
  #debug-hint { grid-column: 1; }
  #debug-hint { margin-top: 0; }
}

@media (max-height: 720px) and (min-width: 861px) {
  .game-brand-lockup { margin-bottom: 40px; }
  .boot-title { font-size: 58px; }
  #web-login { padding: 24px 30px; }
  .game-login-status { margin-bottom: 16px; }
  .game-login-subtitle { margin-bottom: 15px; }
  #web-zone-wrap,
  .game-login-field { margin-bottom: 11px; }
  .game-login-links { margin-top: 12px; padding-top: 12px; }
}