/* =========================================================
   MR Auth UI (Standalone)
   - Requires JS to auto-create #mrAuthOverlay host.
   - Fully scoped under #mrAuthOverlay to avoid side effects.
   ========================================================= */

/* ===== Auth Overlay Host ===== */
#mrAuthOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;

  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  z-index: 9999; /* 결과 UI/보상팝업/게이트팝업 전부 위 */
}

#mrAuthOverlay.open{ display: flex; }

/* ===== Auth Modal Card ===== */
#mrAuthOverlay .mrAuthModal{
  width: min(720px, 100%);
  max-height: min(78vh, 760px);

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px 16px 14px;
  border-radius: 22px;

  background: rgba(26,19,34,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);

  color: var(--text, rgba(255,255,255,0.92));
  font-family: inherit;
  overflow: hidden;
}

/* ===== Header ===== */
#mrAuthOverlay .mrAuthHead{
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  padding: 6px 8px 2px;
}

#mrAuthOverlay .mrAuthTitle{
  font-size: 18px;
  font-weight: 1100;
  letter-spacing: 0.3px;
  text-align: center;
  width: 100%;

  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 18px rgba(0,0,0,0.55);
}

/* 닫기(X) 버튼 */
#mrAuthOverlay .mrAuthClose{
  position: absolute;
  min-width: 0;
  padding: 0 18px;
  width: auto;
  right: 6px;
  top: 6px;

  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);

  cursor: pointer;
  font-size: 16px;
  line-height: 1;

  -webkit-user-select: none;
  user-select: none;
}

#mrAuthOverlay .mrAuthClose:hover{
  filter: brightness(1.07);
}

/* ===== Body ===== */
#mrAuthOverlay .mrAuthBody{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px 14px;

  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;

  color: rgba(255,255,255,0.86);
  line-height: 1.6;
}

/* Scrollbar */
#mrAuthOverlay .mrAuthBody::-webkit-scrollbar{ width: 10px; }
#mrAuthOverlay .mrAuthBody::-webkit-scrollbar-thumb{
  background: rgba(195,169,224,0.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.12);
}
#mrAuthOverlay .mrAuthBody::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.16);
  border-radius: 999px;
}

/* ===== Auth Modal UI (migrated from lobby, scoped) ===== */
#mrAuthOverlay .authForm{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mrAuthOverlay .authField{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mrAuthOverlay .authLabel{
  font-size: 13px;
  opacity: 0.88;
  font-weight: 1000;
}

#mrAuthOverlay .authInput{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);

  outline: none;
  font-family: inherit;
  font-weight: 900;

  -webkit-user-select: text;
  user-select: text;
}

#mrAuthOverlay .authInput:focus{
  border-color: rgba(195,169,224,0.40);
  box-shadow: 0 0 0 3px rgba(195,169,224,0.10);
}

#mrAuthOverlay .authHint{
  margin: 0;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.5;
}

#mrAuthOverlay .authMsg{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

#mrAuthOverlay .authMsg.ok{
  border-color: rgba(195,169,224,0.30);
  background: rgba(195,169,224,0.08);
}

#mrAuthOverlay .authMsg.err{
  border-color: rgba(255,120,120,0.25);
  background: rgba(255,120,120,0.07);
}

#mrAuthOverlay .authRow{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#mrAuthOverlay .authLinkBtn{
  background: none;
  border: 0;
  padding: 0;

  color: var(--accent, rgba(195,169,224,0.95));
  cursor: pointer;

  font: inherit;
  font-weight: 1000;

  text-decoration: none;
  border-bottom: 1px solid rgba(195,169,224,0.45);
}

#mrAuthOverlay .authLinkBtn:hover{
  border-bottom-color: rgba(195,169,224,0.85);
  filter: brightness(1.08);
}

/* 버튼들: 전역 button 스타일 건드리면 안 되니까 overlay 안에서만 */
#mrAuthOverlay button{
  cursor: pointer;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  padding: 14px 18px;

  font-weight: 1100;
  letter-spacing: 0.3px;

  background: var(--accent, #c3a9e0);
  color: #110b18;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform .08s ease, filter .08s ease;

  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}

#mrAuthOverlay button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#mrAuthOverlay button:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

#mrAuthOverlay .ghost{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}

#mrAuthOverlay .authBtnWide{
  width: 100%;
}

#mrAuthOverlay .authBtnRow{
  display: flex;
  gap: 10px;
}

#mrAuthOverlay .authBtnRow button{
  width: 100%;
}

#mrAuthOverlay .authSubRow{
  display: flex;
  justify-content: center;
}

/* (선택) 모바일에서 카드 패딩 살짝 줄임 */
@media (max-width: 520px){
  #mrAuthOverlay .mrAuthModal{
    padding: 14px 14px 12px;
    border-radius: 18px;
  }
  #mrAuthOverlay .mrAuthBody{
    padding: 12px 12px;
  }
#mrAuthGateOverlay button{ min-width: 0; }

}

/* =========================================================
   Auth Gate Overlay (Playground)
   - #mrAuthGateOverlay is injected by mr_auth_ui.js
   ========================================================= */
#mrAuthGateOverlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;

  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  z-index: 9998; /* resultOverlay(대개 9999 전후)보다 확실히 위 */
}

#mrAuthGateOverlay .authGateCard{
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px 16px 14px;
  border-radius: 22px;

  background: rgba(26,19,34,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);

  color: rgba(255,255,255,0.92);
}

#mrAuthGateOverlay .authGateTitle{
  font-size: 18px;
  font-weight: 1100;
  letter-spacing: 0.3px;
  text-align: center;
}

#mrAuthGateOverlay .authGateBody{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px 14px;

  color: rgba(255,255,255,0.86);
  line-height: 1.6;
  text-align: center;
}

#mrAuthGateOverlay .authGateActions{
  display: flex;
  gap: 10px;
}

#mrAuthGateOverlay .authGateBtn{
  width: 100%;
  cursor: pointer;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  padding: 14px 18px;

  font-weight: 1100;
  letter-spacing: 0.3px;

  background: var(--accent, #c3a9e0);
  color: #110b18;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform .08s ease, filter .08s ease;

  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}

#mrAuthGateOverlay .authGateBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#mrAuthGateOverlay .authGateBtn:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

#mrAuthGateOverlay .authGateBtn.ghost{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}

/* =========================================================
   Auth Modal Close Button -> Bottom Center
   - Keep markup as-is (button stays in header in DOM)
   - Visually place it at modal bottom center
   ========================================================= */

/* 카드에 하단 버튼 공간 확보 */
#mrAuthOverlay .mrAuthModal{
  position: relative;
  padding-bottom: 72px;
}

#mrAuthOverlay .mrAuthHead{
  position: static !important;
}

#mrAuthOverlay .mrAuthClose{
  top: auto !important;
  right: auto !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  width: min(240px, calc(100% - 32px)) !important;
  height: 46px !important;
  padding: 0 !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;

  box-shadow: none !important;
}