/* ═══════════════════════════════════════════════════════════════════════
   achievements.css
   Paste into your existing stylesheet or link as a separate file.
   Works with achievements_system.js
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens (inherits your existing CSS vars where possible) ─────────── */
:root {
  --achv-radius       : 24px;
  --achv-badge-from   : #6366f1;
  --achv-badge-to     : #8b5cf6;
  --achv-cert-from    : #f59e0b;
  --achv-cert-to      : #ef4444;
  --achv-shadow       : 0 32px 80px -8px rgba(0,0,0,.45);
  --achv-font         : inherit;
  --achv-bg           : #ffffff;
  --achv-text         : #111827;
  --achv-sub          : #6b7280;
  --achv-border       : rgba(0,0,0,.08);
  --achv-backdrop-bg  : rgba(10,10,20,.72);
}

/* Dark-mode overrides (matches your .dark-mode body class) */
body.dark-mode {
  --achv-bg     : #1e1e2e;
  --achv-text   : #f3f4f6;
  --achv-sub    : #9ca3af;
  --achv-border : rgba(255,255,255,.08);
}

/* ── Overlay shell ───────────────────────────────────────────────────── */
#achv-overlay {
  position  : fixed;
  inset     : 0;
  z-index   : 99999;
  display   : flex;
  align-items : center;
  justify-content : center;
  padding   : 16px;
  pointer-events : none; /* only children capture events */
}

/* Backdrop */
.achv-backdrop {
  position  : absolute;
  inset     : 0;
  background: var(--achv-backdrop-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events : all;
  opacity   : 0;
  transition: opacity .35s ease;
}
#achv-overlay.achv-visible .achv-backdrop { opacity: 1; }
#achv-overlay.achv-leaving .achv-backdrop { opacity: 0; }

/* ── Modal card ──────────────────────────────────────────────────────── */
.achv-modal {
  position  : relative;
  background: var(--achv-bg);
  border-radius: var(--achv-radius);
  box-shadow : var(--achv-shadow);
  border    : 1px solid var(--achv-border);
  width     : 100%;
  max-width : 440px;
  padding   : 48px 32px 36px;
  text-align : center;
  pointer-events : all;
  overflow  : hidden;

  /* entrance */
  opacity   : 0;
  transform : translateY(40px) scale(.94);
  transition:
    opacity  .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1);
}
#achv-overlay.achv-visible .achv-modal {
  opacity   : 1;
  transform : translateY(0) scale(1);
}
#achv-overlay.achv-leaving .achv-modal {
  opacity   : 0;
  transform : translateY(20px) scale(.96);
  transition-duration: .3s;
}

/* Gradient accent bar at top */
.achv-modal::before {
  content  : '';
  position : absolute;
  top      : 0; left: 0; right: 0;
  height   : 5px;
  border-radius: var(--achv-radius) var(--achv-radius) 0 0;
}
.achv-is-badge::before  { background: linear-gradient(90deg, var(--achv-badge-from), var(--achv-badge-to)); }
.achv-is-cert::before   { background: linear-gradient(90deg, var(--achv-cert-from),  var(--achv-cert-to)); }

/* ── Confetti wrap ───────────────────────────────────────────────────── */
.achv-confetti-wrap {
  position : absolute;
  inset    : 0;
  overflow : hidden;
  pointer-events : none;
  z-index  : 0;
}

/* Individual confetti dots */
.achv-cdot {
  position : absolute;
  top      : -16px;
  animation: achvFall linear forwards;
}
.achv-cdot--circle  { border-radius: 50%; }
.achv-cdot--square  { border-radius: 2px; }
.achv-cdot--strip   { border-radius: 2px; }

@keyframes achvFall {
  0%   { transform: translateY(0)   translateX(0)              rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(520px) translateX(var(--drift)) rotate(var(--spin)); opacity: 0; }
}

/* ── Icon ring ───────────────────────────────────────────────────────── */
.achv-icon-ring {
  position : relative;
  display  : inline-flex;
  align-items : center;
  justify-content : center;
  margin-bottom : 20px;
  z-index  : 1;
  width    : 100px;
  height   : 100px;
}

/* Pulsing glow rings */
.achv-ring-1, .achv-ring-2, .achv-ring-3 {
  position : absolute;
  border-radius : 50%;
  animation: achvRingPulse 2.4s ease-out infinite;
}
.achv-is-badge .achv-ring-1,
.achv-is-badge .achv-ring-2,
.achv-is-badge .achv-ring-3 { background: var(--achv-badge-from); }
.achv-is-cert .achv-ring-1,
.achv-is-cert .achv-ring-2,
.achv-is-cert .achv-ring-3  { background: var(--achv-cert-from); }

.achv-ring-1 { width:100px; height:100px; opacity:.18; animation-delay: 0s; }
.achv-ring-2 { width: 80px; height: 80px; opacity:.26; animation-delay:.3s; }
.achv-ring-3 { width: 60px; height: 60px; opacity:.35; animation-delay:.6s; }

@keyframes achvRingPulse {
  0%   { transform: scale(1);    opacity: inherit; }
  60%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Emoji icon */
.achv-main-icon {
  position : relative;
  font-size : 2.8rem;
  line-height: 1;
  animation : achvBounce .6s .35s cubic-bezier(.34,1.56,.64,1) both;
  z-index  : 2;
  filter   : drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
@keyframes achvBounce {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* Sparkle spokes */
.achv-sparkle-set {
  position : absolute;
  inset    : 0;
  pointer-events : none;
}
.achv-sp {
  position : absolute;
  top      : 50%;
  left     : 50%;
  width    : 3px;
  height   : 14px;
  border-radius : 2px;
  transform-origin : 50% 0;
  animation: achvSparkle 1.8s ease-in-out .5s infinite;
}
.achv-is-badge .achv-sp { background: var(--achv-badge-from); }
.achv-is-cert  .achv-sp { background: var(--achv-cert-from); }

/* Position each spoke around the ring */
.achv-sp-0 { transform: translate(-50%, -100%) rotate(0deg)   translateY(-54px); animation-delay:.50s; }
.achv-sp-1 { transform: translate(-50%, -100%) rotate(45deg)  translateY(-54px); animation-delay:.65s; }
.achv-sp-2 { transform: translate(-50%, -100%) rotate(90deg)  translateY(-54px); animation-delay:.80s; }
.achv-sp-3 { transform: translate(-50%, -100%) rotate(135deg) translateY(-54px); animation-delay:.95s; }
.achv-sp-4 { transform: translate(-50%, -100%) rotate(180deg) translateY(-54px); animation-delay:1.10s; }
.achv-sp-5 { transform: translate(-50%, -100%) rotate(225deg) translateY(-54px); animation-delay:1.25s; }
.achv-sp-6 { transform: translate(-50%, -100%) rotate(270deg) translateY(-54px); animation-delay:1.40s; }
.achv-sp-7 { transform: translate(-50%, -100%) rotate(315deg) translateY(-54px); animation-delay:1.55s; }

@keyframes achvSparkle {
  0%, 100% { opacity: 0; transform-box: fill-box; }
  40%, 60% { opacity: 1; }
}

/* ── Type pill ───────────────────────────────────────────────────────── */
.achv-pill {
  display     : inline-block;
  padding     : 4px 14px;
  border-radius: 99px;
  font-size   : .72rem;
  font-weight : 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom : 10px;
  position    : relative;
  z-index     : 1;
}
.achv-is-badge .achv-pill {
  background: linear-gradient(135deg, var(--achv-badge-from), var(--achv-badge-to));
  color: #fff;
}
.achv-is-cert .achv-pill {
  background: linear-gradient(135deg, var(--achv-cert-from), var(--achv-cert-to));
  color: #fff;
}

/* ── Text ────────────────────────────────────────────────────────────── */
.achv-heading {
  font-family : var(--achv-font);
  font-size   : 1.45rem;
  font-weight : 800;
  color       : var(--achv-text);
  margin      : 0 0 10px;
  line-height : 1.25;
  position    : relative;
  z-index     : 1;
}
.achv-sub {
  font-size  : .92rem;
  color      : var(--achv-sub);
  margin     : 0 0 28px;
  line-height : 1.55;
  position   : relative;
  z-index    : 1;
}

/* ── CTA row ─────────────────────────────────────────────────────────── */
.achv-cta-row {
  display : flex;
  gap     : 10px;
  justify-content : center;
  flex-wrap: wrap;
  margin-bottom: 4px;
  position : relative;
  z-index  : 1;
}

.achv-btn-primary {
  display     : inline-flex;
  align-items : center;
  gap         : 6px;
  padding     : 11px 22px;
  border-radius: 12px;
  font-size   : .9rem;
  font-weight : 700;
  color       : #fff;
  text-decoration : none;
  border      : none;
  cursor      : pointer;
  transition  : transform .15s, box-shadow .15s;
}
.achv-is-badge .achv-btn-primary {
  background : linear-gradient(135deg, var(--achv-badge-from), var(--achv-badge-to));
  box-shadow : 0 4px 20px rgba(99,102,241,.4);
}
.achv-is-cert .achv-btn-primary {
  background : linear-gradient(135deg, var(--achv-cert-from), var(--achv-cert-to));
  box-shadow : 0 4px 20px rgba(245,158,11,.4);
}
.achv-btn-primary:hover {
  transform  : translateY(-2px);
  box-shadow : 0 8px 28px rgba(0,0,0,.3);
}

.achv-btn-ghost {
  display     : inline-flex;
  align-items : center;
  padding     : 11px 22px;
  border-radius: 12px;
  font-size   : .9rem;
  font-weight : 700;
  color       : var(--achv-text);
  background  : transparent;
  border      : 2px solid var(--achv-border);
  cursor      : pointer;
  transition  : border-color .15s, background .15s, transform .15s;
}
.achv-btn-ghost:hover {
  border-color : var(--achv-badge-from);
  background   : rgba(99,102,241,.06);
  transform    : translateY(-2px);
}
.achv-is-cert .achv-btn-ghost:hover {
  border-color : var(--achv-cert-from);
  background   : rgba(245,158,11,.06);
}

/* ── Share panel ─────────────────────────────────────────────────────── */
.achv-share-panel {
  margin-top : 20px;
  padding    : 18px 16px 14px;
  background : rgba(0,0,0,.04);
  border-radius : 16px;
  border     : 1px solid var(--achv-border);
  position   : relative;
  z-index    : 1;

  /* animate open */
  animation  : achvPanelIn .3s cubic-bezier(.22,1,.36,1) both;
}
body.dark-mode .achv-share-panel { background: rgba(255,255,255,.05); }

@keyframes achvPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.achv-share-intro {
  font-size  : .78rem;
  color      : var(--achv-sub);
  margin     : 0 0 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.achv-share-grid {
  display : grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap     : 8px;
}

/* Individual social buttons */
.achv-social {
  display     : flex;
  align-items : center;
  justify-content : center;
  flex-direction  : column;
  gap         : 5px;
  padding     : 10px 6px;
  border-radius : 12px;
  font-size   : .72rem;
  font-weight : 700;
  color       : #fff;
  text-decoration : none;
  border      : none;
  cursor      : pointer;
  transition  : transform .15s, box-shadow .15s, filter .15s;
  line-height : 1;
}
.achv-social svg { width: 20px; height: 20px; flex-shrink: 0; }
.achv-social:hover {
  transform  : translateY(-3px) scale(1.04);
  box-shadow : 0 6px 20px rgba(0,0,0,.28);
  filter     : brightness(1.08);
}
.achv-social:active { transform: scale(.97); }

.achv-wa  { background: #25d366; }
.achv-li  { background: #0077b5; }
.achv-fb  { background: #1877f2; }
.achv-tw  { background: #000; }
.achv-tg  { background: #229ed9; }
.achv-rd  { background: #ff4500; }
.achv-copy {
  background: #374151;
  font-family: inherit;
}
body.dark-mode .achv-copy { background: #4b5563; }

/* ── Close button ────────────────────────────────────────────────────── */
.achv-close {
  position   : absolute;
  top        : 14px;
  right      : 14px;
  width      : 34px;
  height     : 34px;
  border-radius : 50%;
  border     : none;
  background : rgba(0,0,0,.06);
  color      : var(--achv-sub);
  cursor     : pointer;
  display    : flex;
  align-items : center;
  justify-content : center;
  transition : background .15s, color .15s, transform .15s;
  z-index    : 10;
  flex-shrink: 0;
}
.achv-close:hover {
  background : rgba(0,0,0,.14);
  color      : var(--achv-text);
  transform  : rotate(90deg);
}
body.dark-mode .achv-close { background: rgba(255,255,255,.08); }
body.dark-mode .achv-close:hover { background: rgba(255,255,255,.18); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .achv-modal {
    padding     : 40px 20px 28px;
    border-radius: 20px;
    max-width   : 100%;
  }
  .achv-heading { font-size: 1.25rem; }
  .achv-main-icon { font-size: 2.4rem; }
  .achv-cta-row { flex-direction: column; align-items: stretch; }
  .achv-btn-primary,
  .achv-btn-ghost { justify-content: center; }
  .achv-share-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 340px) {
  .achv-share-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced-motion safety ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .achv-cdot,
  .achv-ring-1, .achv-ring-2, .achv-ring-3,
  .achv-sp,
  .achv-main-icon { animation: none !important; }
  .achv-modal,
  .achv-backdrop { transition-duration: .1s !important; }
}