/* ── Level Hero ── */
.level-hero { display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-2xl);margin-bottom:var(--spacing-lg);position:relative;overflow:hidden;gap:var(--spacing-xl); }
.level-hero::before { content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.1),transparent 70%);pointer-events:none; }
.level-hero-left { display:flex;align-items:center;gap:var(--spacing-lg);position:relative; }
.level-avatar { width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-green));display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;flex-shrink:0; }
.level-user-name { font-size:1.1rem;font-weight:800;margin-bottom:4px; }
.level-badge-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.level-badge { padding:3px 10px;border-radius:6px;font-size:0.72rem;font-weight:700;background:rgba(124,58,237,0.15);color:var(--accent-purple); }
.level-title { font-size:0.85rem;font-weight:600;color:var(--text-secondary); }
.level-hero-right { flex:1;max-width:320px;position:relative; }
.xp-bar-wrap { margin-bottom:6px; }
.xp-bar { height:12px;background:rgba(255,255,255,0.04);border-radius:6px;overflow:hidden; }
.xp-bar-fill { height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-purple),var(--accent-green));transition:width 1s cubic-bezier(0.22,1,0.36,1); }
.xp-text { display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-muted);margin-top:4px; }
.xp-next { font-size:0.75rem;color:var(--accent-purple);font-weight:600; }

/* ── Streak ── */
.streak-section { display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-md); }
.streak-card { padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:160px; }
.streak-main { display:flex;align-items:baseline;gap:8px; }
.streak-fire { font-size:1.8rem; }
.streak-count { font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.streak-label { font-size:0.85rem;font-weight:600;color:var(--text-secondary); }
.streak-best { font-size:0.72rem;color:var(--text-muted);margin-top:8px; }
.streak-calendar { padding:var(--spacing-lg);display:flex;align-items:center; }
.streak-week { display:flex;gap:8px;width:100%;justify-content:space-between; }
.streak-day { display:flex;flex-direction:column;align-items:center;gap:4px;flex:1; }
.streak-day-label { font-size:0.6rem;font-weight:600;color:var(--text-muted);text-transform:uppercase; }
.streak-day-dot { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;transition:all 0.3s; }
.streak-day-dot.active { background:linear-gradient(135deg,var(--accent-green),var(--accent-emerald));color:#fff;box-shadow:0 0 12px rgba(16,185,129,0.3); }
.streak-day-dot.inactive { background:rgba(255,255,255,0.04);color:var(--text-muted); }
.streak-day-dot.today { border:2px solid var(--accent-purple); }
.streak-warning { grid-column:1/-1;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);font-size:0.85rem;font-weight:600;color:var(--accent-amber);border-left:3px solid var(--accent-amber); }

/* ── Badge Category ── */
.badge-category-title { font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:var(--spacing-md);margin-top:var(--spacing-lg); }
.badge-counter { font-size:0.78rem;color:var(--accent-purple);font-weight:700; }

/* ── Badges Grid ── */
.badges-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-md); }
.badge-card { padding:var(--spacing-lg);position:relative;cursor:default;transition:all 0.3s;border-left:3px solid transparent; }
.badge-card:hover { transform:translateY(-2px); }
.badge-card.earned { border-left-color:var(--accent-green); }
.badge-card.earned:hover { box-shadow:0 0 24px rgba(16,185,129,0.15); }
.badge-card.locked { opacity:0.5; }
.badge-card.locked:hover { opacity:0.7; }
.badge-card.bronze { border-left-color:#cd7f32; }
.badge-card.bronze:hover { box-shadow:0 0 24px rgba(205,127,50,0.2); }
.badge-card.silver { border-left-color:#c0c0c0; }
.badge-card.silver:hover { box-shadow:0 0 24px rgba(192,192,192,0.2); }
.badge-card.gold { border-left-color:#ffd700; }
.badge-card.gold:hover { box-shadow:0 0 24px rgba(255,215,0,0.2); }
.badge-card.diamond { border-left-color:#b9f2ff; }
.badge-card.diamond:hover { box-shadow:0 0 24px rgba(185,242,255,0.2); }

.badge-icon-wrap { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm); }
.badge-icon { font-size:2rem;line-height:1; }
.badge-lock { font-size:0.85rem;color:var(--text-muted); }
.badge-tier { font-size:0.55rem;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase; }
.badge-tier.bronze { background:rgba(205,127,50,0.15);color:#cd7f32; }
.badge-tier.silver { background:rgba(192,192,192,0.15);color:#c0c0c0; }
.badge-tier.gold { background:rgba(255,215,0,0.15);color:#ffd700; }
.badge-tier.diamond { background:rgba(185,242,255,0.15);color:#b9f2ff; }

.badge-name { font-size:0.9rem;font-weight:800;margin-bottom:2px; }
.badge-desc { font-size:0.72rem;color:var(--text-muted);line-height:1.4;margin-bottom:var(--spacing-sm); }
.badge-earned-date { font-size:0.65rem;color:var(--accent-green);font-weight:600; }
.badge-progress { margin-top:var(--spacing-sm); }
.badge-progress-bar { height:5px;background:rgba(255,255,255,0.04);border-radius:3px;overflow:hidden; }
.badge-progress-fill { height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-purple),var(--accent-green));transition:width 0.8s; }
.badge-progress-text { font-size:0.65rem;color:var(--text-muted);margin-top:3px; }

/* ── Badge Popup ── */
.badge-popup-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:center; }
.badge-popup-overlay.active { display:flex; }
.badge-popup-card { position:relative;text-align:center;padding:var(--spacing-2xl);max-width:360px;width:90%;background:rgba(14,28,18,0.95);backdrop-filter:blur(24px);border:1px solid rgba(124,58,237,0.2);border-radius:var(--radius-xl);animation:badgePopIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.badge-popup-card canvas { position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:none; }
.badge-popup-icon { font-size:4rem;margin-bottom:var(--spacing-md);animation:badgeBounce 0.6s ease 0.3s both; }
.badge-popup-title { font-size:1.1rem;font-weight:800;margin-bottom:4px;color:var(--accent-purple); }
.badge-popup-name { font-size:1.3rem;font-weight:900;margin-bottom:var(--spacing-sm); }
.badge-popup-xp { font-size:1rem;font-weight:700;color:var(--accent-green);margin-bottom:var(--spacing-lg); }
.badge-popup-btn { padding:12px 40px;border-radius:var(--radius-md);font-size:0.9rem;font-weight:700;background:linear-gradient(135deg,var(--accent-purple),var(--accent-green));color:#fff;cursor:pointer;border:none;transition:transform 0.2s; }
.badge-popup-btn:hover { transform:scale(1.05); }

@keyframes badgePopIn { 0%{opacity:0;transform:scale(0.5)} 100%{opacity:1;transform:scale(1)} }
@keyframes badgeBounce { 0%{opacity:0;transform:scale(0) rotate(-10deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }

/* ── Section Title ── */
.section-title-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md); }
.section-title-row h3 { font-size:1.1rem;font-weight:800; }

/* ── Responsive ── */
@media(max-width:768px) {
  .level-hero { flex-direction:column;text-align:center;padding:var(--spacing-lg); }
  .level-hero-left { flex-direction:column; }
  .level-hero-right { max-width:100%;width:100%; }
  .streak-section { grid-template-columns:1fr; }
  .streak-card { flex-direction:row;gap:var(--spacing-md); }
  .badges-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}