/* COMPONENTS.CSS */

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-full); border:none;
  font-family:var(--font); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all var(--dur) var(--ease);
  white-space:nowrap; user-select:none; position:relative; overflow:hidden; width:100%;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background var(--dur-fast); }
.btn:hover::after  { background:rgba(255,255,255,0.08); }
.btn:active        { transform:scale(0.97); }
.btn:disabled      { opacity:0.45; cursor:not-allowed; transform:none; }
.btn-primary { background:linear-gradient(135deg,var(--navy),var(--navy3)); color:#fff; box-shadow:var(--shadow-lg); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-xl); }
.btn-gold    { background:linear-gradient(135deg,var(--gold),#B8821E); color:#fff; box-shadow:var(--shadow-gold); }
.btn-gold:hover { transform:translateY(-1px); }
.btn-outline { background:transparent; border:2px solid var(--border2); color:var(--text2); }
.btn-outline:hover { border-color:var(--navy); color:var(--navy); }
.btn-ghost   { background:var(--surface2); border:1.5px solid var(--border); color:var(--text2); }
.btn-ghost:hover { background:var(--surface3); border-color:var(--border2); }
.btn-success { background:linear-gradient(135deg,var(--emerald),#059669); color:#fff; }
.btn-danger  { background:var(--danger-dim); border:1.5px solid var(--danger); color:var(--danger); }
.btn-sm { padding:8px 18px; font-size:.8rem; }
.btn-xs { padding:6px 14px; font-size:.74rem; }
.btn-auto { width:auto; }
.btn .spinner { width:16px; height:16px; border:2.5px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; display:none; flex-shrink:0; }
.btn.loading .spinner { display:block; }
.btn.loading .btn-text { opacity:0.7; }

/* Inputs */
.input-group { margin-bottom:18px; }
.input-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); margin-bottom:8px; }
.input {
  width:100%; background:var(--surface); border:2px solid var(--border);
  border-radius:var(--r); padding:13px 16px; color:var(--text);
  font-family:var(--font); font-size:.95rem; outline:none;
  transition:all var(--dur); box-shadow:var(--shadow-xs);
}
.input:focus   { border-color:var(--navy); box-shadow:0 0 0 4px rgba(10,22,40,0.07); }
.input::placeholder { color:var(--text4); }
.input.error   { border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-dim); }
.input.success { border-color:var(--emerald); box-shadow:0 0 0 4px var(--emerald-dim); }
.input-wrap { position:relative; }
.input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:.95rem; pointer-events:none; color:var(--text3); }
.input-wrap .input { padding-left:42px; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-sm); transition:all var(--dur); }
.card-hover:hover { box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--border2); }
.card-press:active { transform:scale(0.98); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--r-full); font-size:.68rem; font-weight:700; }
.badge-navy    { background:rgba(10,22,40,0.07); color:var(--navy3); }
.badge-gold    { background:var(--gold-dim); color:var(--gold); }
.badge-emerald { background:var(--emerald-dim); color:var(--emerald); }
.badge-sky     { background:var(--sky-dim); color:var(--sky); }
.badge-rose    { background:var(--rose-dim); color:var(--rose); }
.badge-violet  { background:var(--violet-dim); color:var(--violet); }
.badge-amber   { background:var(--amber-dim); color:var(--amber); }

/* Progress */
.progress-wrap { height:6px; background:var(--border); border-radius:var(--r-full); overflow:hidden; }
.progress-fill { height:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--navy),var(--gold)); transition:width 0.5s var(--ease-out); position:relative; overflow:hidden; }
.progress-fill::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); animation:shimmer 2s infinite; }
.progress-wrap.thin { height:3px; }
.progress-wrap.thick { height:10px; }

/* Stat box */
.stat-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 10px; text-align:center; box-shadow:var(--shadow-xs); }
.stat-num { font-size:1.4rem; font-weight:800; display:block; line-height:1; margin-bottom:5px; }
.stat-lbl { font-size:.58rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text3); }

/* Section label */
.sec-label { font-size:.62rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text3); display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sec-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* Toast */
.toast {
  position:fixed; bottom:calc(var(--bottom-nav-h) + 16px); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:10px 22px;
  border-radius:var(--r-full); font-size:.82rem; font-weight:600;
  z-index:9999; opacity:0; transition:all var(--dur) var(--ease-spring);
  white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-lg);
  max-width:calc(100vw - 40px);
}
.toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--emerald); }
.toast.error   { background:var(--danger); }
.toast.gold    { background:var(--gold); }

/* XP Float */
.xp-float { position:fixed; font-size:.82rem; font-weight:800; color:var(--gold); pointer-events:none; z-index:9998; animation:xpFloat 1s ease forwards; }

/* Divider */
.divider { height:1px; background:var(--border); margin:16px 0; }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,var(--border) 25%,var(--border2) 50%,var(--border) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm); }

/* Rank popup overlay */
.rank-overlay { position:fixed; inset:0; background:rgba(10,22,40,0.85); display:none; align-items:center; justify-content:center; z-index:9000; backdrop-filter:blur(4px); }
.rank-overlay.show { display:flex; }
.rank-popup { background:var(--surface); border-radius:var(--r-xl); padding:40px 32px; text-align:center; max-width:320px; width:90%; box-shadow:var(--shadow-xl); animation:rankUp 0.6s var(--ease-spring) both; border:1px solid var(--border); }
.rank-badge-big { font-size:4rem; display:block; margin-bottom:12px; }
.rank-congrats  { font-size:.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text3); margin-bottom:6px; }
.rank-new-name  { font-family:var(--font-serif); font-size:1.8rem; color:var(--navy); margin-bottom:5px; }
.rank-desc      { font-size:.82rem; color:var(--text2); line-height:1.6; margin-bottom:24px; }