html,
body {
  background: #08090d !important;
}

.game-back {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #4d3036;
  background: rgba(8, 9, 13, .72);
  color: #d49a7b;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.game-back:hover,
.game-back:focus-visible {
  color: #08090d;
  background: #ff3b30;
  border-color: #ff3b30;
  outline: none;
}

#overlay,
#signin,
#lobby,
#searching,
#result,
#leaderboard-panel {
  background: rgba(8, 9, 13, .9) !important;
  color: #f4e7dc !important;
}

#overlay-settings,
#profile-chip,
.mp-lb-table,
#signin-username,
.menu-btn,
.bestof-btn,
.remap-key {
  background: rgba(23, 21, 29, .86) !important;
  border-color: #4d3036 !important;
}

#menu-main,
#menu-settings,
#menu-controls {
  color: #f4e7dc !important;
}

.menu-title {
  color: #f4e7dc !important;
  text-shadow: 0 0 38px rgba(255, 59, 48, .24);
}

.menu-subtitle,
.setting-label,
.remap-action,
.menu-section-label {
  color: #d49a7b !important;
}

#signin h2,
#lobby h2,
#searching h2,
#result h2,
#leaderboard-panel h2,
#result-title,
#lb-countdown-mp,
#overlay-sens-val,
.setting-val,
.bestof-btn.active,
.remap-row.capturing .remap-key {
  color: #ff3b30 !important;
}

#signin button,
.lobby-btn,
.menu-btn {
  background: #17151d !important;
  color: #ff3b30 !important;
  border-color: #ff3b30 !important;
}

#signin button:hover,
.lobby-btn:hover,
.menu-btn:hover,
.bestof-btn:hover,
.remap-row:hover {
  background: rgba(255, 59, 48, .14) !important;
  color: #f4e7dc !important;
  border-color: #ff9a3d !important;
}

.lobby-btn.cancel,
.lobby-btn--secondary,
.menu-btn.danger {
  color: #d49a7b !important;
  border-color: #4d3036 !important;
  background: transparent !important;
}

#signin-username {
  color: #f4e7dc !important;
}

#signin-username:focus {
  border-color: #ff3b30 !important;
}

#signin-error,
#result-title.defeat {
  color: #ff2747 !important;
}

#overlay-sens {
  accent-color: #ff3b30;
}

.menu-range {
  accent-color: #ff3b30 !important;
}

.hud-health,
.hud-ammo,
.hud-timer,
.hud-score,
.hud-format {
  color: #f4e7dc !important;
}

.ch-line {
  background: #ff3b30 !important;
}

#signin-get-phantom a {
  display: block;
  margin-top: .65rem;
}

#signin-get-phantom .signin-practice,
.signin-practice-direct {
  color: #ff9a3d !important;
  border-bottom-color: rgba(255, 154, 61, .45) !important;
}

@media (max-width: 640px) {
  .game-back {
    top: 10px;
    left: 10px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  #overlay,
  #signin,
  #lobby,
  #searching,
  #result,
  #leaderboard-panel {
    padding: 1rem;
    justify-content: center !important;
    gap: .85rem !important;
  }

  #signin h2,
  #lobby h2,
  #searching h2,
  #result h2,
  #leaderboard-panel h2 {
    max-width: 18ch;
    font-size: 1rem !important;
    line-height: 1.6;
  }

  #signin p,
  #lobby p,
  #searching p,
  #result p {
    max-width: 24ch;
    font-size: 12px !important;
    line-height: 1.65;
  }

  #signin button,
  .lobby-btn,
  #signin-username {
    width: min(100%, 300px);
    min-height: 44px;
    box-sizing: border-box;
  }

  #signin-get-phantom[style*="block"] {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }

  #signin-get-phantom a,
  .signin-practice-direct {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.45;
  }

  #overlay > div,
  #menu-main,
  #menu-settings,
  #menu-controls {
    width: min(100%, 330px) !important;
    padding: 1.25rem .75rem !important;
  }

  .menu-title {
    font-size: clamp(1.65rem, 10vw, 2.35rem) !important;
    letter-spacing: .18em !important;
  }

  .menu-subtitle {
    font-size: .7rem !important;
  }

  .menu-btn,
  .bestof-btn {
    min-height: 44px;
    padding: .55rem .9rem !important;
    font-size: .78rem !important;
  }

  .remap-row {
    padding: .48rem .35rem !important;
  }

  .remap-key {
    min-width: 3.2rem !important;
  }

  .hud-health,
  .hud-ammo {
    font-size: clamp(1rem, 6vw, 1.25rem) !important;
  }

  .hud-health {
    left: 16px !important;
    bottom: 18px !important;
  }

  .hud-ammo {
    right: 16px !important;
    bottom: 18px !important;
  }
}

@media (max-width: 430px) {
  #overlay,
  #signin,
  #lobby,
  #searching,
  #result,
  #leaderboard-panel {
    transform: translateY(-4svh);
  }
}