/* Gamification: dashboard, badges, toasts, Play Mode HUD, mastery bars */

/* #dashboard itself shouldn't form a box — that would cap how far
   .dash-bar can stick to its own (short) height. Let it dissolve so
   .dash-bar's containing block is the tall .lessons-region instead. */
#dashboard { display: contents; }

/* ─── Dashboard bar (sticky score section) ─── */
.dash-bar {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: var(--brand-cream);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  max-width: 920px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.dash-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.dash-level { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.dash-level-num {
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
  color: #fff; background: var(--brand-navy);
  padding: 4px 12px; border-radius: 14px; flex-shrink: 0;
}
.dash-xp-track {
  width: 90px; height: 8px; border-radius: 5px; background: var(--border);
  overflow: hidden; flex-shrink: 0;
}
.dash-xp-fill {
  height: 100%; width: 0%; background: var(--brand-amber);
  border-radius: 5px; transition: width .5s ease;
}
.dash-xp-text { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.dash-chip {
  font-size: .8rem; font-weight: 600; color: var(--brand-navy);
  background: #fff; border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 16px; white-space: nowrap;
}
.dash-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.install-btn {
  background: #fff; color: var(--brand-navy); border: 1.5px solid var(--brand-navy);
  font-family: var(--sans); font-weight: 600; font-size: .84rem;
  padding: 9px 16px; border-radius: 20px; cursor: pointer; transition: all .15s;
}
.install-btn:hover { background: var(--brand-navy); color: #fff; }

.dash-badges {
  max-width: 920px; margin: 0 auto; padding: 0 24px 18px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.badge-chip {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: #EEE9DE; filter: grayscale(1); opacity: .45;
  cursor: default; transition: transform .15s;
}
.badge-chip.earned {
  background: linear-gradient(160deg, #FFF6E0, #FDE4B0);
  filter: none; opacity: 1; box-shadow: var(--shadow-sm);
}
.badge-chip.earned:hover { transform: scale(1.12); }

/* ─── Toasts ─── */
.toast-stack {
  position: fixed; top: 84px; right: 16px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: var(--brand-navy); color: #fff; font-size: .84rem; font-weight: 600;
  line-height: 1.5; padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateX(16px);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(0); }

/* ─── Per-card mastery + practice button ─── */
.error-progress {
  padding: 14px 30px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #FBF8F1;
}
.mastery-pill { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.mastery-bar { width: 100px; height: 7px; border-radius: 5px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.mastery-fill { display: block; height: 100%; width: 0%; background: var(--right); border-radius: 5px; transition: width .5s ease; }
.mastery-text { font-size: .76rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.error-progress.all-mastered .mastery-text { color: var(--right); }
.practice-btn {
  background: var(--brand-navy); color: #fff; border: none;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  padding: 8px 16px; border-radius: 18px; cursor: pointer; transition: all .15s;
}
.practice-btn:hover { background: var(--brand-navy-2); }

/* ─── Play Mode ─── */
.play-highlight {
  outline: 2.5px solid var(--brand-amber); outline-offset: 3px;
  animation: playHighlightFlash 1.4s ease-out;
}
@keyframes playHighlightFlash {
  0% { outline-color: var(--brand-amber); box-shadow: 0 0 0 8px rgba(245,158,11,.18); }
  100% { outline-color: var(--brand-amber); box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.mic-btn.play-target { animation: playTargetPulse 1.1s ease-in-out infinite; }
@keyframes playTargetPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
  50%     { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
}

.play-hud {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  z-index: 250; width: min(92vw, 480px);
  background: var(--brand-navy); color: #fff;
  border-radius: 16px; padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s ease;
}
.play-hud.show { transform: translate(-50%, 0); }
.play-hud-close {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: .85rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.play-hud-close:hover { background: rgba(255,255,255,.24); }
.play-hud-msg { font-size: .92rem; padding-right: 22px; }
.play-hud-msg b { color: var(--brand-amber); }
.play-hud-stats { font-size: .74rem; color: rgba(255,255,255,.65); }
.play-hud-actions { display: flex; gap: 10px; margin-top: 2px; }
.play-hud-skip, .play-hud-stop {
  flex: 1; font-family: var(--sans); font-size: .82rem; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; border: none;
  transition: background .15s;
}
.play-hud-skip { background: var(--brand-amber); color: #4A2E00; }
.play-hud-skip:hover { background: #E88E00; }
.play-hud-stop { background: rgba(255,255,255,.12); color: #fff; }
.play-hud-stop:hover { background: rgba(255,255,255,.22); }

@media (max-width: 640px) {
  .dash-bar { padding: 14px 16px; }
  .dash-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .toast-stack { top: auto; bottom: 100px; right: 12px; left: 12px; align-items: stretch; }
  .toast { text-align: center; }
}