/* Gamification: streak milestone burst */
@keyframes streak-burst {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--color-accent, var(--accent)); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent, var(--accent)) 35%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px transparent; }
}
.streak-burst { animation: streak-burst .6s ease-out forwards; }
.xp-bar, .xp-bar > *, .xp-fill { transition: width 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .streak-burst { animation: none; } .xp-bar, .xp-bar > *, .xp-fill { transition: none; } }
/* NexGen gamification widgets on the My Dashboard overview: streak, daily XP bar,
   90-day activity heatmap and mastery ring. Scoped under .mydash and built only
   from existing theme variables (brand.css / my-dashboard.css), so dark mode
   re-maps them with no per-widget override. */
.mydash .md-gami{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,.9fr);gap:16px;margin:0 0 16px}
.mydash .md-gami .md-card{background:var(--card,var(--bg));color:var(--ink);border-color:var(--line)}
.mydash .md-gami h3{gap:8px;flex-wrap:wrap}

/* streak */
.mydash .streak-widget{display:flex;flex-direction:column;justify-content:center}
.mydash .streak-main{display:flex;align-items:center;gap:12px}
.mydash .streak-flame{font-size:34px;line-height:1;display:inline-block;filter:grayscale(1);opacity:.55}
.mydash .streak-widget.is-active .streak-flame{filter:none;opacity:1;animation:md-streak-pulse 1.8s ease-in-out infinite}
.mydash .streak-count{font-size:30px;line-height:1;color:var(--heading,var(--ink))}
.mydash .streak-label{color:var(--muted);font-weight:600}
.mydash .streak-start{margin:10px 0 0;font-weight:700;color:var(--teal)}
.mydash .streak-longest{margin:8px 0 0;font-size:12px;color:var(--muted)}
@keyframes md-streak-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* daily XP */
.mydash .xp-level-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill,999px);background:var(--teal-light,var(--teal2));color:var(--teal);white-space:nowrap}
.mydash .xp-track{height:14px;border-radius:var(--radius-pill,999px);background:var(--surface-3,var(--line));overflow:hidden}
.mydash .xp-fill{display:block;height:100%;border-radius:inherit;background:var(--teal);transition:width .6s ease}
.mydash .xp-text{margin:10px 0 0;font-size:14px}
.mydash .xp-done{font-size:11px;font-weight:700;color:var(--good);margin-left:6px}
.mydash .xp-total{margin:4px 0 0;font-size:12px;color:var(--muted)}

/* heatmap: 13 weeks x 7 days, Monday first */
.mydash .heat-wrap{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 6px}
.mydash .heat-months{grid-column:2;display:grid;grid-template-columns:repeat(13,1fr);gap:3px;font-size:10px;color:var(--muted);min-height:12px}
.mydash .heat-months span{white-space:nowrap;overflow:visible}
.mydash .heat-days{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(7,1fr);gap:3px;font-size:10px;color:var(--muted);align-items:center}
.mydash .heat-grid{grid-column:2;grid-row:2;display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.mydash .heat-cell{display:block;aspect-ratio:1;min-width:8px;border-radius:3px;position:relative;outline:none}
.mydash .heat-out{background:transparent}
.mydash .heat-l0{background:var(--surface-3,var(--line))}
.mydash .heat-l1{background:color-mix(in srgb,var(--teal) 30%,var(--card,var(--bg)))}
.mydash .heat-l2{background:color-mix(in srgb,var(--teal) 62%,var(--card,var(--bg)))}
.mydash .heat-l3{background:var(--teal)}
.mydash .heat-cell[data-tip]:hover,.mydash .heat-cell[data-tip]:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.mydash .heat-cell[data-tip]:hover::after,.mydash .heat-cell[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;padding:5px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--ink);color:var(--card,var(--bg));pointer-events:none}
.mydash .heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:10px;font-size:10.5px;color:var(--muted)}
.mydash .heat-legend .heat-cell{width:11px;min-width:11px}

/* mastery ring */
.mydash .progress-ring-widget{text-align:center}
.mydash .ring-box{display:flex;justify-content:center}
.mydash .ring-bg{stroke:var(--surface-3,var(--line))}
.mydash .ring-fg{stroke:var(--teal);transition:stroke-dasharray .9s ease}
.mydash .ring-good .ring-fg{stroke:var(--good)}
.mydash .ring-warn .ring-fg{stroke:var(--warn)}
.mydash .ring-bad .ring-fg{stroke:var(--bad)}
.mydash .ring-pct{font-size:24px;font-weight:800;fill:var(--ink)}
.mydash .ring-label{font-size:11px;fill:var(--muted)}
.mydash .ring-count{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.mydash .ring-pass{margin:6px 0 0;font-size:12px}
.mydash .ring-pass small{color:var(--muted)}

@media (max-width:1100px){.mydash .md-gami{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mydash .md-gami{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .mydash .streak-widget.is-active .streak-flame{animation:none}
  .mydash .xp-fill,.mydash .ring-fg{transition:none}
}