.start-login{margin-top:.75rem;width:100%;text-align:left}
.start-login-toggle{width:100%}
.start-login-toggle.hidden{display:none !important}
#start-overlay .start-login-methods,
.start-login-methods{
  display:none;
  flex-direction:row;
  align-items:stretch;
  justify-content:space-between;
  gap:0;
  margin-top:.55rem;
  padding:0;
  border:2px solid #ff4de3;
  border-radius:18px;
  background:rgba(18,0,28,.55);
  overflow:hidden;
  min-height:58px;
  box-sizing:border-box;
  width:100%;
}
#start-overlay .start-login.open .start-login-methods,
.start-login.open .start-login-methods{
  display:flex !important;
}
#start-overlay .start-login-methods.hidden{display:none !important}
#start-overlay .start-login-methods .login-half,
.login-half{
  appearance:none !important;
  flex:1 1 50% !important;
  width:50% !important;
  max-width:50% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font:700 .95rem/1 system-ui,sans-serif !important;
  letter-spacing:.12em !important;
  cursor:pointer;
  padding:.95rem 0 !important;
  display:block !important;
}
#start-overlay .start-login-methods .login-half:hover{
  background:rgba(255,77,227,.12) !important;
}
.start-login .auth-chip{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  flex-wrap:nowrap;
  gap:.5rem;
  width:100%;
  box-sizing:border-box;
  overflow:visible;
  padding:0.7rem 0.75rem 0.8rem;
}
.start-login .auth-chip.hidden{display:none !important}
.start-login .auth-chip-meta,
.start-login #auth-chip-name,
.start-login #auth-points-val,
.start-login #auth-redeem-val{
  width:100%;
  text-align:center;
  align-items:center;
}
.start-login .interac-row,
.start-login .payout-note{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  box-sizing:border-box;
  text-align:left;
}
.start-login .interac-row input{
  display:block;
  width:100%;
  max-width:100%;
  margin:0.35rem 0 0;
  box-sizing:border-box;
}
.start-login .payout-rails{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
  width:100%;
}
.start-login .payout-rails button{
  appearance:none;
  height:2.2rem;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.28);
  background:transparent;
  color:inherit;
  font:700 .68rem/1 system-ui,sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
}
.start-login .payout-rails button.on{
  border-color:#00f5ff;
  box-shadow:0 0 12px rgba(0,245,255,.35);
}
.start-login .auth-chip .start-action-btn{
  width:100% !important;
  align-self:stretch;
  flex:0 0 auto;
}
.start-login .auth-error{margin:.4rem 0 0;color:#ff6b8a;font-size:.7rem}
.start-login .auth-error.hidden{display:none}
.start-login .payout-note{margin:.45rem 0 0;font-size:.68rem;letter-spacing:.04em;color:rgba(245,245,250,.72)}

@media (max-width: 820px) {
  #start-overlay .start-layout{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:min(420px,100%) !important;
    max-width:100%;
    margin:0 auto;
    padding-left:.85rem !important;
    padding-right:.85rem !important;
    box-sizing:border-box;
    gap:.75rem;
  }
  #start-overlay .start-main.borderless{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    align-self:stretch !important;
    box-sizing:border-box;
  }
  #start-overlay .start-bgm-mute,
  #start-overlay .start-login,
  #start-overlay .start-login .auth-chip,
  #start-overlay .start-actions,
  #start-overlay .start-action-btn,
  #start-overlay .start-jukebox,
  #start-overlay .public-rank-card{
    width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }
  #start-overlay .start-jukebox,
  #start-overlay .public-rank-card{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
  }
}

@media (min-width: 821px) {
  #start-overlay {
    overflow: hidden;
  }
  #start-overlay .start-layout {
    display: grid !important;
    grid-template-columns: minmax(240px, 320px) minmax(280px, 420px) minmax(240px, 300px) !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: min(1100px, 100%) !important;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box;
  }
  #start-overlay .start-main.borderless {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  #start-overlay .public-rank-card,
  #start-overlay .start-jukebox {
    width: 100% !important;
    height: 0 !important;
    min-height: 100% !important;
    max-height: none;
    overflow: hidden !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
  }
  #start-overlay #jukebox-list,
  #start-overlay .public-rank-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #00f5ff transparent;
  }
  #start-overlay #jukebox-list::-webkit-scrollbar,
  #start-overlay .public-rank-list::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }
  #start-overlay #jukebox-list::-webkit-scrollbar-thumb,
  #start-overlay .public-rank-list::-webkit-scrollbar-thumb {
    background: #00f5ff;
    border-radius: 999px;
  }
}