/* ☁️ 계정 로그인 / 클라우드 저장 (js/cloud-save.js) - 타이틀 화면(z-index 5000) 위에도 뜨도록 */
.modal-overlay.cloud-modal { z-index: 5100; }
.cloud-sheet { display: flex; flex-direction: column; gap: 8px; }
.cloud-desc { font-size: 12px; color: #cbd5e1; line-height: 1.45; }
.cloud-btn { width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 800; color: #0f172a; background: linear-gradient(180deg, #fbbf24, #f59e0b); border: 1px solid #fcd34d; border-radius: 10px; cursor: pointer; }
.cloud-btn:disabled { opacity: 0.5; cursor: default; }
.cloud-btn.small { width: auto; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.cloud-btn.ghost { color: #e2e8f0; background: rgba(30, 41, 59, 0.9); border-color: rgba(255, 255, 255, 0.18); }
.cloud-btn.oauth { color: #1f2937; background: #fff; border-color: #e5e7eb; }
.cloud-btn.oauth.kakao { background: #fee500; border-color: #fee500; color: #191919; }
.cloud-or { text-align: center; font-size: 11px; color: #64748b; margin-top: 2px; }
.cloud-email-row { display: flex; gap: 6px; }
.cloud-email-row .coupon-input { flex: 1; min-width: 0; }
.cloud-msg { font-size: 11px; color: #93c5fd; min-height: 14px; line-height: 1.4; }
.cloud-account { display: flex; flex-direction: column; gap: 6px; }
.cloud-who { font-size: 13px; font-weight: 800; color: #f8fafc; word-break: break-all; }
.cloud-status { font-size: 11px; color: #94a3b8; }
.cloud-status.synced { color: #4ade80; }
.cloud-status.error, .cloud-status.conflict { color: #f87171; }
.cloud-btn-row { display: flex; gap: 6px; }
.cloud-btn-row .cloud-btn { flex: 1; }
.cloud-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cloud-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 10px; background: rgba(15, 23, 42, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.14); font-size: 11px; color: #cbd5e1; }
.cloud-card b { font-size: 12px; color: #f8fafc; margin-bottom: 2px; }
.cloud-card em { font-style: normal; font-weight: 800; color: #fde68a; }
.cloud-card small { color: #64748b; font-size: 10px; }
.cloud-card.remote { border-color: rgba(56, 189, 248, 0.5); }

.cloud-type { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
.cloud-type.guest { color: #fde68a; background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.4); }
.cloud-type.member { color: #86efac; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); }
.cloud-warn { font-size: 11px; color: #fcd34d; line-height: 1.45; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.25); border-radius: 8px; padding: 6px 8px; }

/* ⚙️ 상단 우측 설정 버튼 */
.header-settings-btn { flex: none; width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; cursor: pointer; padding: 0; }
.header-settings-btn:active { transform: scale(0.94); }
.header-settings-btn img.emo { width: 17px; height: 17px; }

/* ✏️ 영웅 이름 */
.profile-card-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-rename-btn { font-size: 10px; font-weight: 800; color: #fde68a; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.profile-rename-btn small { color: #fbbf24; font-weight: 700; }

/* 좁은 화면: 상단 바(프로필 + 재화 3개 + 설정 버튼)가 한 줄에 들어가도록 간격을 줄임 */
.header-status-bar { gap: 6px; }
.profile-pill { flex: none; }
.user-level { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.currencies { min-width: 0; }
/* 게임 화면 폭(최대 430px)은 기기와 무관하므로 항상 적용 */
.header-status-bar { padding: 8px 6px; gap: 4px; }
.profile-pill { gap: 6px; }
.currencies { gap: 4px; }
.currency-badge { padding: 4px 6px; gap: 3px; }
.header-settings-btn { width: 27px; }
.stat-summary-row { gap: 3px; }
.stat-tag { padding-left: 4px; padding-right: 4px; }
.currency-badge .cur-val { font-size: 0.78rem; 
}
.profile-rename-btn.used, .profile-rename-btn:disabled { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.3); cursor: default; }

/* 🤖 사람 확인 (js/captcha.js): 확인이 필요할 때만 화면 가운데 표시 */
/* 위젯이 동작하려면 화면에 그려져 있어야 해서 숨길 때도 display:none 대신 투명 + 클릭 통과 */
.captcha-box { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, 0.6); opacity: 0; pointer-events: none; }
.captcha-box.show { opacity: 1; pointer-events: auto; }
.captcha-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; }
.captcha-title { font-size: 12px; font-weight: 800; color: #e2e8f0; }

.captcha-sub { font-size: 11px; color: #94a3b8; }
.captcha-skip { margin-top: 2px; font-size: 11px; font-weight: 700; color: #cbd5e1; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 5px 10px; cursor: pointer; }