/* Nebula — streaks, achievements, toasts & confetti (progress.js). */

/* ----------------------------- header chip ------------------------------ */
.hp-streak {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-weight: 800; font-size: 0.9rem; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-2-rgb), 0.14));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.hp-streak:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28); border-color: rgba(var(--accent-rgb), 0.7); }
.hp-streak__ico { font-size: 1.05rem; line-height: 1; }
.hp-streak__txt { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .hp-streak__txt { display: none; } .hp-streak { padding: 8px; } }

@media (prefers-reduced-motion: no-preference) {
  .hp-streak.is-bump { animation: hp-bump 0.5s ease; }
  @keyframes hp-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.18) rotate(-4deg); }
    70% { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
}

/* ------------------------------- confetti ------------------------------- */
#hp-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; }

/* -------------------------------- toasts -------------------------------- */
.hp-toast-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.hp-toast {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 14px; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-2-rgb), 0.85));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: translateX(120%); opacity: 0; transition: transform 0.34s cubic-bezier(.2,.9,.3,1.2), opacity 0.34s;
  color: #07121a;
}
.hp-toast.is-in { transform: translateX(0); opacity: 1; }
.hp-toast.is-out { transform: translateX(120%); opacity: 0; }
.hp-toast__icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.4rem; background: rgba(255, 255, 255, 0.28);
}
.hp-toast__body { min-width: 0; }
.hp-toast__title { margin: 0; font-weight: 900; font-size: 0.95rem; }
.hp-toast__desc { margin: 2px 0 0; font-size: 0.8rem; opacity: 0.85; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .hp-toast { transition: opacity 0.2s; transform: none; }
  .hp-toast.is-out { transform: none; }
}

/* ----------------------------- achievements modal ----------------------- */
.hp-ach-overlay { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 20px; }
.hp-ach-back { position: absolute; inset: 0; background: rgba(5, 7, 14, 0.66); backdrop-filter: blur(3px); }
.hp-ach-card {
  position: relative; width: 100%; max-width: 540px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px; box-shadow: var(--shadow); padding: 24px;
  animation: hp-pop 0.2s ease;
}
@keyframes hp-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.hp-ach-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text); cursor: pointer; font-size: 0.9rem; font-family: inherit;
}
.hp-ach-close:hover { background: rgba(255, 255, 255, 0.12); }

.hp-ach-head {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 20px;
}
.hp-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 12px 6px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-stat__icon { font-size: 1.2rem; }
.hp-stat__val { font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hp-stat__label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.hp-ach-title { margin: 0 0 14px; font-size: 1.05rem; }

.hp-ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .hp-ach-grid { grid-template-columns: 1fr; } .hp-ach-head { grid-template-columns: repeat(2, 1fr); } }
.hp-ach-item {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-ach-item.is-locked { opacity: 0.62; }
.hp-ach-item.is-on {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-2-rgb), 0.05));
}
.hp-ach-item__icon {
  flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.4rem; background: rgba(255, 255, 255, 0.05);
}
.hp-ach-item.is-locked .hp-ach-item__icon { filter: grayscale(1); }
.hp-ach-item__info { min-width: 0; flex: 1; }
.hp-ach-item__name { margin: 0; font-weight: 800; font-size: 0.9rem; }
.hp-ach-item__desc { margin: 2px 0 6px; font-size: 0.76rem; color: var(--muted); line-height: 1.3; }
.hp-ach-item__prog { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-ach-item__done { font-size: 0.74rem; font-weight: 800; color: var(--accent-2); }
.hp-ach-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 4px; }
.hp-ach-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Light-mode tweaks */
html[data-mode="light"] .hp-ach-card { border-color: rgba(20, 24, 50, 0.1); }
html[data-mode="light"] .hp-ach-close,
html[data-mode="light"] .hp-ach-item,
html[data-mode="light"] .hp-ach-item__icon { border-color: rgba(20, 24, 50, 0.1); }
html[data-mode="light"] .hp-ach-item { background: rgba(20, 24, 50, 0.03); }
html[data-mode="light"] .hp-ach-bar { background: rgba(20, 24, 50, 0.12); }