/* Catze 로그인 게이트 — 기본 스킨 (게임 비종속)
   구조만 책임지는 최소 스타일. 게임 디자인에 맞추려면
   begin(cb, { cardClass, buttonClass, primaryClass })로 게임 클래스를 덧입히거나
   아래 CSS 변수만 덮어쓰면 된다. */
.catze-login {
  --catze-bg-a: #6ba84a;
  --catze-bg-b: #4e8b39;
  --catze-bg-c: #2f5d26;
  --catze-card: #f6e6c8;
  --catze-ink: #6b5741;
  --catze-accent: #e2a33c;
  --catze-gold: #c9922f;
  --catze-ok: #3f9d54;
  --catze-err: #c0392b;

  position: absolute; inset: 0;
  z-index: 50;   /* 게임 화면 위 게이트 */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, var(--catze-bg-a) 0%, var(--catze-bg-b) 45%, var(--catze-bg-c) 100%);
}
.catze-login.hidden { display: none; }

.catze-login-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(20, 34, 14, .55) 100%);
}
.catze-login-card {
  position: relative; z-index: 2;
  width: min(88vw, 380px);
  padding: 32px 28px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  /* 게임이 cardClass로 자기 패널 스킨을 덧입히면 아래 기본 배경은 가려진다 */
  background: var(--catze-card);
  border-radius: 14px;
}
.catze-login-logo .t { font-size: 40px; font-weight: 800; line-height: 1.1; text-shadow: 0 3px 0 rgba(30, 18, 8, .35); }
.catze-login-logo .s { font-size: 15px; color: var(--catze-gold); margin-top: 4px; }

.catze-login-status { min-height: 20px; font-size: 14px; color: var(--catze-ink); line-height: 1.4; }
.catze-login-status.ok  { color: var(--catze-ok); font-weight: 700; }
.catze-login-status.err { color: var(--catze-err); font-weight: 700; }

.catze-login-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.catze-login-actions.hidden { display: none; }
.catze-login-actions button { width: 100%; font-size: 18px; padding: 12px 18px; cursor: pointer; }
.catze-login-actions button[disabled] { opacity: .55; cursor: default; }

.catze-login-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid rgba(92, 70, 50, .25); border-top-color: var(--catze-accent);
  animation: catze-login-spin .8s linear infinite;
}
.catze-login-spinner.hidden { display: none; }
@keyframes catze-login-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .catze-login-spinner { animation-duration: 2.4s; }
}