/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d0d1a;
  --bg-card:      #13132b;
  --bg-card2:     #1a1a38;
  --border:       rgba(255,255,255,0.07);
  --accent:       #7c3aed;
  --accent-h:     #6d28d9;
  --accent-glow:  rgba(124,58,237,0.35);
  --success:      #10b981;
  --success-h:    #059669;
  --success-bg:   rgba(16,185,129,0.12);
  --gold:         #f59e0b;
  --gold-bg:      rgba(245,158,11,0.12);
  --danger:       #ef4444;
  --danger-bg:    rgba(239,68,68,0.12);
  --text:         #f1f5f9;
  --text-2:       #94a3b8;
  --text-3:       #64748b;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 4px 24px rgba(0,0,0,0.4);
  --shadow-card:  0 2px 12px rgba(0,0,0,0.3);
}

html { font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Buttons ────────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-accent:hover {
  background: var(--accent-h);
  box-shadow: 0 0 14px var(--accent-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg-card2); color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--bg-card); color: var(--text); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid transparent;
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-sm   { padding: 6px 14px; font-size: 0.82rem; }
.btn-lg   { padding: 13px 32px; font-size: 1rem; }
.btn-full { width: 100%; }
.btn-icon { padding: 6px 10px; min-width: 32px; }

/* ─── Inputs ─────────────────────────────────────────────────────────────────*/
.input {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.input::placeholder { color: var(--text-3); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ─── Utilities ──────────────────────────────────────────────────────────────*/
.hidden { display: none !important; }
.flex-grow { flex: 1; }
.w-xp { width: 72px; flex-shrink: 0; }

/* ─── ════════════════════════════════════════════════════════════════════════ */
/* ─── AUTH PAGE ─────────────────────────────────────────────────────────────*/
/* ─── ════════════════════════════════════════════════════════════════════════ */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.18) 0%, transparent 70%), var(--bg);
}

.auth-wrapper {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.auth-brand { text-align: center; }
.brand-icon  { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.brand-name  { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.brand-tagline { color: var(--text-2); font-size: 0.95rem; margin-top: 6px; }

.auth-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active {
  background: var(--accent);
  color: #fff;
}

.auth-error {
  background: var(--danger-bg);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  color: #fca5a5;
  font-size: 0.88rem;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.auth-success {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-size: 0.88rem;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.auth-view-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
  text-align: center;
}
.auth-view-hint {
  margin: 0 0 20px;
  font-size: 0.88rem;
  color: var(--text-2);
  text-align: center;
}
.auth-small-link {
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
}
.auth-small-link:hover { color: var(--accent); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-hint {
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 4px;
  display: block;
}

.auth-footer {
  text-align: center;
  color: var(--text-2);
  font-size: 0.88rem;
  margin-top: 20px;
}

/* ─── ════════════════════════════════════════════════════════════════════════ */
/* ─── DASHBOARD ─────────────────────────────────────────────────────────────*/
/* ─── ════════════════════════════════════════════════════════════════════════ */
.dash-page { display: flex; flex-direction: column; min-height: 100vh; }

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  background: rgba(13,13,26,0.9);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 16px; }
.header-right { display: flex; align-items: center; gap: 12px; }

.logo {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.today-badge {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  color: var(--text-2);
}

.user-pill {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.82rem;
  color: var(--text-2);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main layout */
.dash-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 800px) {
  .dash-main { grid-template-columns: 1fr; }
}

/* Panel (habits side) */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  align-self: start;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-title {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Habits list */
.habits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}
.habit-item:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }
.habit-item.done  {
  background: var(--success-bg);
  border-color: rgba(16,185,129,0.25);
}

.habit-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--text-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s, border-color 0.15s;
}
.habit-item.done .habit-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.habit-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity 0.15s;
}
.habit-item.done .habit-name {
  text-decoration: line-through;
  opacity: 0.55;
}

.habit-xp {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-bg);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.habit-item.done .habit-xp { opacity: 0.5; }

/* Skeleton loading */
.skeleton-list { display: flex; flex-direction: column; gap: 8px; }
.skeleton-item {
  height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-card2) 25%, rgba(255,255,255,0.06) 50%, var(--bg-card2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-2);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--text); }
.empty-state p  { font-size: 0.9rem; margin-bottom: 16px; }

/* Stats column */
.stats-column { display: flex; flex-direction: column; gap: 14px; }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stat-header h3 { font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }

.xp-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--gold-bg);
  color: var(--gold);
}
.xp-badge.weekly  { background: rgba(124,58,237,0.15); color: #a78bfa; }
.xp-badge.monthly { background: rgba(59,130,246,0.15); color: #93c5fd; }

/* Progress bar */
.progress-track {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.progress-fill.monthly {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-2);
}
.pct-label { font-weight: 700; color: var(--text); }

/* Streak card */
.streak-card {
  background: linear-gradient(135deg, #1a1215 0%, var(--bg-card) 100%);
  border-color: rgba(245,158,11,0.18);
}
.streak-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.streak-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.streak-unit  { font-size: 1rem; color: var(--text-2); font-weight: 500; }
.streak-best  { font-size: 0.8rem; color: var(--text-3); }

/* Weekly bars */
.week-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 56px;
  margin-bottom: 10px;
}
.day-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.day-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: rgba(124,58,237,0.25);
  transition: height 0.4s ease, background 0.3s;
  position: relative;
}
.day-bar.has-xp  { background: rgba(124,58,237,0.7); }
.day-bar.today   { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.day-bar.perfect { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
.day-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
}
.day-label.today { color: var(--accent); }

/* ─── MODALS ─────────────────────────────────────────────────────────────────*/
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.modal-header h2 { font-size: 1.1rem; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--bg-card2); color: var(--text); }

.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }

/* Wider modal for the Manage Quests edit view */
.modal-edit { max-width: 660px; }

/* Edit habits list — two-line card layout */
.edit-habit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Drag-and-drop states */
.edit-habit-row[draggable="true"] { cursor: default; }
.edit-habit-row.dragging          { opacity: 0.35; }
.edit-habit-row.drag-over-top    { border-top:    2px solid var(--accent); }
.edit-habit-row.drag-over-bottom { border-bottom: 2px solid var(--accent); }

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: var(--text-3);
  font-size: 1.05rem;
  padding: 0 4px;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  transition: color 0.12s;
}
.drag-handle:hover  { color: var(--text-2); }
.drag-handle:active { cursor: grabbing; }

/* Line 1: quest name + XP */
.edit-row-top {
  display: flex;
  gap: 8px;
  align-items: center;
}
.edit-row-top .input {
  padding: 7px 10px;
  font-size: 0.9rem;
}
.edit-row-top .edit-name { flex: 1; min-width: 0; }
.edit-row-top .edit-xp   { width: 76px; flex-shrink: 0; }

/* Line 2: checkboxes + optional minutes + action buttons */
.edit-row-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.edit-row-bottom .edit-min {
  width: 70px;
  flex-shrink: 0;
  padding: 5px 8px;
  font-size: 0.84rem;
}
.edit-row-spacer { flex: 1; min-width: 8px; }

.edit-wknd-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.edit-wknd-wrap input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

/* Add quest form */
.add-quest-form {
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 4px;
}
/* Row 1: name + XP */
.add-quest-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Row 2: toggles + add button */
.add-quest-row-2 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle-wrap input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.toggle-label-text { font-size: 0.82rem; color: var(--text-2); white-space: nowrap; }

.add-error {
  color: #fca5a5;
  font-size: 0.84rem;
}

/* Celebration modal */
.modal-celebration {
  max-width: 400px;
  text-align: center;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a0a3a, var(--bg-card));
  border-color: rgba(124,58,237,0.4);
}
.celeb-emoji { font-size: 4rem; margin-bottom: 16px; animation: bounce 0.6s ease infinite alternate; }
@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.celeb-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.celeb-msg   { color: var(--text-2); margin-bottom: 24px; font-size: 1rem; }

/* Confetti dots */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

/* ─── ════════════════════════════════════════════════════════════════════════ */
/* ─── ANIMATED CSS FLAME  (real layered divs — visually distinct per level)   */
/* ─── ════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
/* --sway  = rotation amplitude (increases per level)                            */
/* --glow-* = pulsing drop-shadow values (increase per level)                    */
@keyframes outerWave {
  0%   { transform: translateX(-50%) rotate(calc(var(--sway, 5deg) * -1)) scaleX(1.00); }
  100% { transform: translateX(-50%) rotate(var(--sway, 5deg))             scaleX(0.86); }
}
@keyframes midWave {
  0%   { transform: translateX(-50%) rotate(calc(var(--sway, 5deg) *  0.8)) scaleX(0.90); }
  100% { transform: translateX(-50%) rotate(calc(var(--sway, 5deg) * -0.8)) scaleX(1.08); }
}
@keyframes innerWave {
  0%   { transform: translateX(-50%) rotate(calc(var(--sway, 5deg) * -0.6)) scaleY(0.94) scaleX(1.04); }
  100% { transform: translateX(-50%) rotate(calc(var(--sway, 5deg) *  0.6)) scaleY(1.08) scaleX(0.93); }
}
@keyframes coreWave {
  0%   { transform: translateX(-50%) scaleX(0.85) scaleY(0.92); }
  100% { transform: translateX(-50%) scaleX(1.10) scaleY(1.06); }
}
@keyframes atRiskFlicker {
  0%,100% { opacity: 1.0; }
  40%     { opacity: 0.35; }
  60%     { opacity: 0.75; }
}
/* Side tongue animations — lean outward and breathe */
@keyframes sideTongueLeft {
  0%   { transform: rotate(-6deg)  scaleY(0.88); }
  100% { transform: rotate(-20deg) scaleY(1.14); }
}
@keyframes sideTongueRight {
  0%   { transform: rotate( 6deg)  scaleY(1.14); }
  100% { transform: rotate(20deg)  scaleY(0.88); }
}
@keyframes blueGlowPulse {
  0%,100% { filter: drop-shadow(0 0  8px rgba(59,130,246,0.7)) drop-shadow(0 0 20px rgba(147,197,253,0.3)); }
  50%     { filter: drop-shadow(0 0 18px rgba(59,130,246,1.0)) drop-shadow(0 0 40px rgba(147,197,253,0.7)); }
}
@keyframes orangeGlowPulse {
  0%,100% { filter: drop-shadow(0 0 var(--glow-min, 6px)  var(--glow-col, rgba(249,115,22,0.5))); }
  50%     { filter: drop-shadow(0 0 var(--glow-max, 16px) var(--glow-col, rgba(249,115,22,0.5))); }
}
/* Level 5 only — double-shadow legendary aura */
@keyframes legendaryPulse {
  0%,100% { filter: drop-shadow(0 0 20px rgba(239,68,68,0.9))
                    drop-shadow(0 0 44px rgba(245,158,11,0.35)); }
  50%     { filter: drop-shadow(0 0 36px rgba(239,68,68,1.0))
                    drop-shadow(0 0 72px rgba(245,158,11,0.65)); }
}
/* Levels 6-10 — golden super-flame triple aura */
@keyframes superPulse {
  0%,100% { filter: drop-shadow(0 0 28px rgba(245,158,11,0.95))
                    drop-shadow(0 0 56px rgba(251,191,36,0.55))
                    drop-shadow(0 0 90px rgba(217,119,6,0.25)); }
  50%     { filter: drop-shadow(0 0 46px rgba(245,158,11,1.0))
                    drop-shadow(0 0 90px rgba(251,191,36,0.80))
                    drop-shadow(0 0 140px rgba(217,119,6,0.45)); }
}

/* ── Flame container ────────────────────────────────────────────────────────── */
.flame-wrap {
  position: relative;
  flex-shrink: 0;
  animation: orangeGlowPulse var(--spd, 1s) ease-in-out infinite;
}
.flame-wrap:not([data-super="true"]) {
  transition: width 0.7s cubic-bezier(0.34,1.56,0.64,1),
              height 0.7s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Per-level: size · speed · sway · glow ──────────────────────────────────── */

/*
 * SHAPE PHILOSOPHY:
 *   Low  streak = tall & narrow  (birthday candle)
 *   High streak = wide & squat   (spreading wildfire)
 *   Aspect ratio shifts from ~0.4 → ~1.1 as streak grows.
 *   Side flame tongues (::before / ::after) appear at level 3+.
 */

/* Level 0 — dying ember: barely a flicker */
.flame-wrap[data-level="0"] {
  width: 12px; height: 32px; --spd: 3.5s; opacity: 0.45;
  --sway: 2deg;
  --glow-min: 2px;  --glow-max: 4px;   --glow-col: rgba(180,83,9,0.25);
}
/* Level 1 — candle: narrow, taller than wide  (ratio 0.43) */
.flame-wrap[data-level="1"] {
  width: 20px; height: 46px; --spd: 1.6s;
  --sway: 5deg;
  --glow-min: 4px;  --glow-max: 10px;  --glow-col: rgba(249,115,22,0.50);
}
/* Level 2 — campfire: starting to spread  (ratio 0.60) */
.flame-wrap[data-level="2"] {
  width: 36px; height: 60px; --spd: 1.15s;
  --sway: 7deg;
  --glow-min: 6px;  --glow-max: 15px;  --glow-col: rgba(249,115,22,0.65);
}
/* Level 3 — bonfire: clearly wide, side tongues appear  (ratio 0.82) */
.flame-wrap[data-level="3"] {
  width: 62px; height: 76px; --spd: 0.82s;
  --sway: 10deg;
  --glow-min: 10px; --glow-max: 22px;  --glow-col: rgba(239,68,68,0.72);
}
/* Level 4 — wildfire: nearly square, strong side tongues  (ratio 0.95) */
.flame-wrap[data-level="4"] {
  width: 84px; height: 88px; --spd: 0.55s;
  --sway: 14deg;
  --glow-min: 14px; --glow-max: 30px;  --glow-col: rgba(220,38,38,0.88);
}
/* Level 5 — first SVG flame (month 1 complete) */
.flame-wrap[data-level="5"] {
  width: auto; height: auto; --spd: 0.35s; --sway: 5deg;
  animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUPER FLAME  (levels 6-10) — SVG-based, grows weekly after month 1.
   Speed and sway kept elegant — impressive not annoying.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Levels 6-10 — auto-sized; JS controls individual SVG dimensions */
.flame-wrap[data-level="6"]  { width: auto; height: auto; --spd: 0.32s; --sway: 4deg; animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite; }
.flame-wrap[data-level="7"]  { width: auto; height: auto; --spd: 0.28s; --sway: 4deg; animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite; }
.flame-wrap[data-level="8"]  { width: auto; height: auto; --spd: 0.25s; --sway: 5deg; animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite; }
.flame-wrap[data-level="9"]  { width: auto; height: auto; --spd: 0.22s; --sway: 5deg; animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite; }
.flame-wrap[data-level="10"] { width: auto; height: auto; --spd: 0.20s; --sway: 5deg; animation: superPulse calc(var(--spd)*1.2) ease-in-out infinite; }

/* ── Shared layer styles ────────────────────────────────────────────────────── */
.flame-part {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  z-index: 1;  /* renders above the ::before/::after side-tongue pseudo-elements */
  border-radius: 48% 52% 22% 28% / 20% 20% 80% 80%;
}
/* Candle shape at levels 0-1: narrower top, same tall teardrop */
.flame-wrap[data-level="0"] .flame-part,
.flame-wrap[data-level="1"] .flame-part { border-radius: 44% 56% 26% 30% / 26% 26% 74% 74%; }
/* Wider base + sharper tip at levels 3+ */
.flame-wrap[data-level="3"] .flame-part,
.flame-wrap[data-level="4"] .flame-part { border-radius: 50% 50% 18% 18% / 14% 14% 86% 86%; }
.flame-wrap[data-level="5"] .flame-part { border-radius: 50% 50% 14% 14% / 10% 10% 90% 90%; }
/* Super levels — very sharp dagger-tip */
.flame-wrap[data-level="6"]  .flame-part,
.flame-wrap[data-level="7"]  .flame-part,
.flame-wrap[data-level="8"]  .flame-part,
.flame-wrap[data-level="9"]  .flame-part,
.flame-wrap[data-level="10"] .flame-part { border-radius: 50% 50% 12% 12% / 8% 8% 92% 92%; }

/* ── Layer sizes (% of container) ──────────────────────────────────────────── */
.flame-outer { width: 100%; height: 100%; }
.flame-mid   { width:  70%; height:  78%; }
.flame-inner { width:  46%; height:  58%; }
.flame-core  { width:  26%; height:  36%; }

/* ── Side tongues — level 3+ (::before = left, ::after = right) ────────────── */
/* These pseudo-elements sit BEHIND the main flame layers (z-index: 0 < 1).     */
.flame-wrap[data-level="3"]::before,  .flame-wrap[data-level="4"]::before,  .flame-wrap[data-level="5"]::before,
.flame-wrap[data-level="6"]::before,  .flame-wrap[data-level="7"]::before,  .flame-wrap[data-level="8"]::before,
.flame-wrap[data-level="9"]::before,  .flame-wrap[data-level="10"]::before,
.flame-wrap[data-level="3"]::after,   .flame-wrap[data-level="4"]::after,   .flame-wrap[data-level="5"]::after,
.flame-wrap[data-level="6"]::after,   .flame-wrap[data-level="7"]::after,   .flame-wrap[data-level="8"]::after,
.flame-wrap[data-level="9"]::after,   .flame-wrap[data-level="10"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  z-index: 0;
  transform-origin: bottom center;
  border-radius: 48% 52% 22% 28% / 20% 20% 80% 80%;
}
/* Left tongue sizes */
.flame-wrap[data-level="3"]::before  { width: 38%; height: 64%; left: 2%; }
.flame-wrap[data-level="4"]::before  { width: 40%; height: 70%; left: 1%; }
.flame-wrap[data-level="5"]::before  { width: 42%; height: 75%; left: 0%; }
.flame-wrap[data-level="6"]::before  { width: 44%; height: 78%; left: 0%; }
.flame-wrap[data-level="7"]::before  { width: 46%; height: 80%; left: 0%; }
.flame-wrap[data-level="8"]::before  { width: 46%; height: 82%; left: 0%; }
.flame-wrap[data-level="9"]::before  { width: 48%; height: 84%; left: 0%; }
.flame-wrap[data-level="10"]::before { width: 50%; height: 86%; left: 0%; }
/* Right tongue sizes */
.flame-wrap[data-level="3"]::after   { width: 38%; height: 64%; right: 2%; }
.flame-wrap[data-level="4"]::after   { width: 40%; height: 70%; right: 1%; }
.flame-wrap[data-level="5"]::after   { width: 42%; height: 75%; right: 0%; }
.flame-wrap[data-level="6"]::after   { width: 44%; height: 78%; right: 0%; }
.flame-wrap[data-level="7"]::after   { width: 46%; height: 80%; right: 0%; }
.flame-wrap[data-level="8"]::after   { width: 46%; height: 82%; right: 0%; }
.flame-wrap[data-level="9"]::after   { width: 48%; height: 84%; right: 0%; }
.flame-wrap[data-level="10"]::after  { width: 50%; height: 86%; right: 0%; }
/* Tongue animations */
.flame-wrap[data-level="3"]::before,  .flame-wrap[data-level="4"]::before,  .flame-wrap[data-level="5"]::before,
.flame-wrap[data-level="6"]::before,  .flame-wrap[data-level="7"]::before,  .flame-wrap[data-level="8"]::before,
.flame-wrap[data-level="9"]::before,  .flame-wrap[data-level="10"]::before
  { animation: sideTongueLeft  var(--spd) ease-in-out infinite alternate; }
.flame-wrap[data-level="3"]::after,   .flame-wrap[data-level="4"]::after,   .flame-wrap[data-level="5"]::after,
.flame-wrap[data-level="6"]::after,   .flame-wrap[data-level="7"]::after,   .flame-wrap[data-level="8"]::after,
.flame-wrap[data-level="9"]::after,   .flame-wrap[data-level="10"]::after
  { animation: sideTongueRight var(--spd) ease-in-out infinite alternate-reverse; }

/* ── Default colours (Level 1 — warm candle orange) ────────────────────────── */
.flame-outer { background: linear-gradient(0deg, #c2410c 0%, #dc2626 35%, rgba(220, 38,38,0) 100%); }
.flame-mid   { background: linear-gradient(0deg, #ea580c 0%, #f97316 35%, rgba(249,115,22,0) 100%); }
.flame-inner { background: linear-gradient(0deg, #fbbf24 0%, #f59e0b 40%, rgba(245,158,11,0) 100%); }
.flame-core  { background: linear-gradient(0deg, #fef9c3 0%, #fde047 50%, rgba(253,224,71,0) 100%); }

/* ── Level 0 — dim dying ember (brown-grey, low saturation) ─────────────────── */
.flame-wrap[data-level="0"] .flame-outer { background: linear-gradient(0deg, #78350f 0%, #92400e 45%, transparent 100%); }
.flame-wrap[data-level="0"] .flame-mid   { background: linear-gradient(0deg, #b45309 0%, #d97706 45%, transparent 100%); }
.flame-wrap[data-level="0"] .flame-inner { background: linear-gradient(0deg, #d97706 0%, #f59e0b 55%, transparent 100%); }
.flame-wrap[data-level="0"] .flame-core  { background: linear-gradient(0deg, #fbbf24 0%, #fde047 65%, transparent 100%); }

/* Level 1 uses defaults (warm orange) — no override needed */

/* ── Level 2 — campfire (brighter orange, white-ish core appears) ────────────── */
.flame-wrap[data-level="2"] .flame-outer { background: linear-gradient(0deg, #9a3412 0%, #c2410c 35%, transparent 100%); }
.flame-wrap[data-level="2"] .flame-mid   { background: linear-gradient(0deg, #ea580c 0%, #f97316 40%, transparent 100%); }
.flame-wrap[data-level="2"] .flame-inner { background: linear-gradient(0deg, #fbbf24 0%, #fef08a 45%, transparent 100%); }
.flame-wrap[data-level="2"] .flame-core  { background: linear-gradient(0deg, #fef9c3 0%, #ffffff  55%, transparent 100%); }

/* ── Level 3 — bonfire (shifts red-orange, hot yellow-white core) ────────────── */
.flame-wrap[data-level="3"] .flame-outer { background: linear-gradient(0deg, #7f1d1d 0%, #991b1b 35%, transparent 100%); }
.flame-wrap[data-level="3"] .flame-mid   { background: linear-gradient(0deg, #c2410c 0%, #ef4444 40%, transparent 100%); }
.flame-wrap[data-level="3"] .flame-inner { background: linear-gradient(0deg, #f97316 0%, #fde047 42%, transparent 100%); }
.flame-wrap[data-level="3"] .flame-core  { background: linear-gradient(0deg, #fefce8 0%, #ffffff  55%, transparent 100%); }
.flame-wrap[data-level="3"]::before,
.flame-wrap[data-level="3"]::after       { background: linear-gradient(0deg, #7f1d1d 0%, #c2410c 45%, transparent 100%); }

/* ── Level 4 — wildfire (deep red outer → orange → blazing white core) ─────── */
.flame-wrap[data-level="4"] .flame-outer { background: linear-gradient(0deg, #450a0a 0%, #7f1d1d 30%, #b91c1c 60%, transparent 100%); }
.flame-wrap[data-level="4"] .flame-mid   { background: linear-gradient(0deg, #b91c1c 0%, #ef4444 35%, #f97316 65%, transparent 100%); }
.flame-wrap[data-level="4"] .flame-inner { background: linear-gradient(0deg, #f97316 0%, #fbbf24 38%, #fef9c3 70%, transparent 100%); }
.flame-wrap[data-level="4"] .flame-core  { background: linear-gradient(0deg, #fefce8 0%, #ffffff  45%, transparent 100%); }
.flame-wrap[data-level="4"]::before,
.flame-wrap[data-level="4"]::after       { background: linear-gradient(0deg, #450a0a 0%, #7f1d1d 25%, #ef4444 62%, transparent 100%); }

/* ── Level 5 — legendary inferno (near-black outer → crimson → white-hot core) */
.flame-wrap[data-level="5"] .flame-outer { background: linear-gradient(0deg, #1a0000 0%, #450a0a 22%, #7f1d1d 52%, transparent 100%); }
.flame-wrap[data-level="5"] .flame-mid   { background: linear-gradient(0deg, #7f1d1d 0%, #b91c1c 28%, #f97316 62%, transparent 100%); }
.flame-wrap[data-level="5"] .flame-inner { background: linear-gradient(0deg, #ea580c 0%, #fbbf24 38%, #fef9c3 74%, transparent 100%); }
.flame-wrap[data-level="5"] .flame-core  { background: linear-gradient(0deg, #fef9c3 0%, #ffffff  35%, rgba(255,255,255,0.85) 70%, transparent 100%); }
.flame-wrap[data-level="5"]::before,
.flame-wrap[data-level="5"]::after       { background: linear-gradient(0deg, #1a0000 0%, #450a0a 18%, #b91c1c 50%, #f97316 80%, transparent 100%); }

/* ══════════════════════════════════════════════════════════════════════════════
   SUPER FLAME COLOURS (levels 6-10) — golden amber → white-hot core.
   Each tier gets hotter: outer darkens, core bleaches toward pure white.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Level 6 — deep amber outer, gold mid, pale yellow inner, white core */
.flame-wrap[data-level="6"] .flame-outer { background: linear-gradient(0deg, #1a0800 0%, #7c2d12 28%, #b45309 56%, transparent 100%); }
.flame-wrap[data-level="6"] .flame-mid   { background: linear-gradient(0deg, #92400e 0%, #d97706 38%, #fbbf24 68%, transparent 100%); }
.flame-wrap[data-level="6"] .flame-inner { background: linear-gradient(0deg, #fbbf24 0%, #fde68a 45%, #fefce8 76%, transparent 100%); }
.flame-wrap[data-level="6"] .flame-core  { background: linear-gradient(0deg, #fef9c3 0%, #ffffff  38%, transparent 100%); }
.flame-wrap[data-level="6"]::before,
.flame-wrap[data-level="6"]::after  { background: linear-gradient(0deg, #1a0800 0%, #7c2d12 30%, #d97706 62%, transparent 100%); }

/* Level 7 — hotter amber */
.flame-wrap[data-level="7"] .flame-outer { background: linear-gradient(0deg, #0f0500 0%, #6b2100 25%, #a16207 54%, transparent 100%); }
.flame-wrap[data-level="7"] .flame-mid   { background: linear-gradient(0deg, #78350f 0%, #ca8a04 36%, #fbbf24 66%, transparent 100%); }
.flame-wrap[data-level="7"] .flame-inner { background: linear-gradient(0deg, #fde047 0%, #fef9c3 46%, #ffffff  74%, transparent 100%); }
.flame-wrap[data-level="7"] .flame-core  { background: linear-gradient(0deg, #fefce8 0%, #ffffff  30%, transparent 100%); }
.flame-wrap[data-level="7"]::before,
.flame-wrap[data-level="7"]::after  { background: linear-gradient(0deg, #0f0500 0%, #6b2100 28%, #ca8a04 60%, transparent 100%); }

/* Level 8 — gold-white, blazing */
.flame-wrap[data-level="8"] .flame-outer { background: linear-gradient(0deg, #0a0300 0%, #451a03 22%, #92400e 50%, transparent 100%); }
.flame-wrap[data-level="8"] .flame-mid   { background: linear-gradient(0deg, #6b2100 0%, #b45309 30%, #f59e0b 60%, #fde68a 80%, transparent 100%); }
.flame-wrap[data-level="8"] .flame-inner { background: linear-gradient(0deg, #fcd34d 0%, #fef9c3 40%, #ffffff  70%, transparent 100%); }
.flame-wrap[data-level="8"] .flame-core  { background: linear-gradient(0deg, #ffffff  0%, rgba(255,255,255,0.92) 50%, transparent 100%); }
.flame-wrap[data-level="8"]::before,
.flame-wrap[data-level="8"]::after  { background: linear-gradient(0deg, #0a0300 0%, #451a03 20%, #b45309 52%, #fbbf24 80%, transparent 100%); }

/* Level 9 — near white-hot */
.flame-wrap[data-level="9"] .flame-outer { background: linear-gradient(0deg, #050200 0%, #3b1300 20%, #78350f 48%, #d97706 74%, transparent 100%); }
.flame-wrap[data-level="9"] .flame-mid   { background: linear-gradient(0deg, #451a03 0%, #92400e 26%, #f59e0b 56%, #fde68a 78%, transparent 100%); }
.flame-wrap[data-level="9"] .flame-inner { background: linear-gradient(0deg, #fde047 0%, #ffffff  36%, transparent 100%); }
.flame-wrap[data-level="9"] .flame-core  { background: linear-gradient(0deg, #ffffff  0%, transparent 100%); }
.flame-wrap[data-level="9"]::before,
.flame-wrap[data-level="9"]::after  { background: linear-gradient(0deg, #050200 0%, #3b1300 18%, #92400e 48%, #f59e0b 76%, transparent 100%); }

/* Level 10 — legendary: outer almost black, core pure blinding white */
.flame-wrap[data-level="10"] .flame-outer { background: linear-gradient(0deg, #020100 0%, #1c0a00 18%, #6b2100 44%, #ca8a04 70%, transparent 100%); }
.flame-wrap[data-level="10"] .flame-mid   { background: linear-gradient(0deg, #3b1300 0%, #78350f 22%, #d97706 50%, #fde047 72%, #ffffff 88%, transparent 100%); }
.flame-wrap[data-level="10"] .flame-inner { background: linear-gradient(0deg, #fbbf24 0%, #ffffff  28%, transparent 100%); }
.flame-wrap[data-level="10"] .flame-core  { background: linear-gradient(0deg, #ffffff  0%, rgba(255,255,255,0.95) 60%, transparent 100%); }
.flame-wrap[data-level="10"]::before,
.flame-wrap[data-level="10"]::after { background: linear-gradient(0deg, #020100 0%, #1c0a00 16%, #78350f 42%, #d97706 68%, #fde047 86%, transparent 100%); }

/* Blue override covers super tongues too */
.flame-wrap[data-blue="true"]::before,
.flame-wrap[data-blue="true"]::after  { background: linear-gradient(0deg, #1e3a8a 0%, #2563eb 40%, rgba(59,130,246,0) 100%); }

/* Super base glows — golden pool */
.flame-wrap[data-level="6"]  { --glow-w:190%; --glow-h:52%; --glow-blur:22px; --glow-bg: radial-gradient(ellipse,rgba(245,158,11,0.90) 0%,rgba(217,119,6,0.40) 50%,transparent 72%); }
.flame-wrap[data-level="7"]  { --glow-w:210%; --glow-h:55%; --glow-blur:26px; --glow-bg: radial-gradient(ellipse,rgba(245,158,11,0.95) 0%,rgba(234,179,8,0.45) 50%,transparent 72%); }
.flame-wrap[data-level="8"]  { --glow-w:230%; --glow-h:58%; --glow-blur:30px; --glow-bg: radial-gradient(ellipse,rgba(253,224,71,0.95) 0%,rgba(245,158,11,0.50) 50%,transparent 72%); }
.flame-wrap[data-level="9"]  { --glow-w:255%; --glow-h:62%; --glow-blur:36px; --glow-bg: radial-gradient(ellipse,rgba(254,249,195,0.98) 0%,rgba(253,224,71,0.55) 48%,transparent 70%); }
.flame-wrap[data-level="10"] { --glow-w:280%; --glow-h:66%; --glow-blur:44px; --glow-bg: radial-gradient(ellipse,rgba(255,255,255,1.0)  0%,rgba(253,224,71,0.65) 44%,transparent 68%); }

/* ── Animations tied to --spd and --sway ────────────────────────────────────── */
.flame-outer { animation: outerWave var(--spd, 1s)               ease-in-out infinite alternate; }
.flame-mid   { animation: midWave   calc(var(--spd, 1s) * 0.74)  ease-in-out infinite alternate-reverse; }
.flame-inner { animation: innerWave calc(var(--spd, 1s) * 0.55)  ease-in-out infinite alternate; }
.flame-core  { animation: coreWave  calc(var(--spd, 1s) * 0.40)  ease-in-out infinite alternate-reverse; }

/* ── Blue flame — 100% day (overrides all level colours, incl. side tongues) ── */
.flame-wrap[data-blue="true"] .flame-outer { background: linear-gradient(0deg, #1e3a8a 0%, #1d4ed8 35%, rgba(29, 78,216,0) 100%); }
.flame-wrap[data-blue="true"] .flame-mid   { background: linear-gradient(0deg, #2563eb 0%, #3b82f6 35%, rgba(59,130,246,0) 100%); }
.flame-wrap[data-blue="true"] .flame-inner { background: linear-gradient(0deg, #60a5fa 0%, #93c5fd 40%, rgba(147,197,253,0) 100%); }
.flame-wrap[data-blue="true"] .flame-core  { background: linear-gradient(0deg, #e0f2fe 0%, #bae6fd 50%, rgba(186,230,253,0) 100%); }
.flame-wrap[data-blue="true"]::before,
.flame-wrap[data-blue="true"]::after       { background: linear-gradient(0deg, #1e3a8a 0%, #2563eb 40%, rgba(59,130,246,0) 100%); }
.flame-wrap[data-blue="true"] { animation: blueGlowPulse calc(var(--spd, 1s) * 1.4) ease-in-out infinite; }

/* ── At-risk — streak in danger, flame flickers ─────────────────────────────── */
.flame-wrap[data-status="at_risk"] .flame-outer,
.flame-wrap[data-status="at_risk"] .flame-mid {
  animation: outerWave var(--spd) ease-in-out infinite alternate,
             atRiskFlicker calc(var(--spd) * 0.6) ease-in-out infinite;
}

/* ── Ember particles ────────────────────────────────────────────────────────── */
/* Spawned by JS — small glowing dots that rise from the flame base and fade.   */
@keyframes particleRise {
  0%   { transform: translate(0px, 0px) scale(1);   opacity: var(--po, 0.9); }
  70%  { opacity: calc(var(--po, 0.9) * 0.5); }
  100% { transform: translate(var(--dx, 0px), var(--dy, -70px)) scale(0.15); opacity: 0; }
}
.flame-particles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;   /* above all flame layers */
}
.fp {  /* individual particle */
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleRise linear forwards;
}

/* ── Multi-flame row (levels 5+) ────────────────────────────────────────────── */
.multi-flame-container {
  display: flex;
  align-items: flex-end;
  gap: 0;
  justify-content: center;
  padding-bottom: 2px;
  position: relative; /* needed so base-glow can position absolutely inside */
}

/* Each tongue wrapper — position:relative lets z-index stack correctly */
.flame-tongue {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
}

/* Shared glowing pool at the base — ties all tongues into one fire source */
.multi-flame-base-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 115%;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(253,224,71,0.95) 0%, rgba(245,158,11,0.50) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 5; /* in front of all flames so it reads as one source */
  animation: baseGlowPulse var(--spd, 0.3s) ease-in-out infinite;
}
.flame-wrap[data-blue="true"] .multi-flame-base-glow {
  background: radial-gradient(ellipse, rgba(186,230,253,0.95) 0%, rgba(59,130,246,0.50) 45%, transparent 72%);
}

/* Week counter badge — top-right corner of flame-wrap */
.week-counter-badge {
  position: absolute;
  top: 2px;
  right: -2px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  border: 2px solid var(--bg-card);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent-glow);
  letter-spacing: 0.02em;
}

/* ── Base glow ───────────────────────────────────────────────────────────────── */
/* Wide radial pool of light underneath the flame — colour & size scale by level */
@keyframes baseGlowPulse {
  0%,100% { opacity: 0.7; transform: translateX(-50%) scaleX(1.00) scaleY(1.00); }
  50%     { opacity: 1.0; transform: translateX(-50%) scaleX(1.15) scaleY(1.10); }
}
.flame-base-glow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: baseGlowPulse var(--spd, 1.5s) ease-in-out infinite;
  /* size and colour driven by data-level on parent via inheritance */
  width: var(--glow-w, 100%);
  height: var(--glow-h, 40%);
  background: var(--glow-bg, radial-gradient(ellipse, rgba(251,146,60,0.6) 0%, rgba(239,68,68,0.2) 50%, transparent 75%));
  filter: blur(var(--glow-blur, 8px));
}
/* Per-level base glow: grows with streak */
.flame-wrap[data-level="0"] { --glow-w:70%;   --glow-h:30%; --glow-blur:4px;  --glow-bg: radial-gradient(ellipse,rgba(120,53,15,0.4) 0%,transparent 70%); }
.flame-wrap[data-level="1"] { --glow-w:110%;  --glow-h:38%; --glow-blur:8px;  --glow-bg: radial-gradient(ellipse,rgba(249,115,22,0.55) 0%,rgba(234,88,12,0.15) 55%,transparent 75%); }
.flame-wrap[data-level="2"] { --glow-w:130%;  --glow-h:42%; --glow-blur:10px; --glow-bg: radial-gradient(ellipse,rgba(251,146,60,0.65) 0%,rgba(239,68,68,0.20) 55%,transparent 75%); }
.flame-wrap[data-level="3"] { --glow-w:150%;  --glow-h:46%; --glow-blur:13px; --glow-bg: radial-gradient(ellipse,rgba(239,68,68,0.75) 0%,rgba(194,65,12,0.25) 55%,transparent 75%); }
.flame-wrap[data-level="4"] { --glow-w:170%;  --glow-h:50%; --glow-blur:16px; --glow-bg: radial-gradient(ellipse,rgba(220,38,38,0.85) 0%,rgba(239,68,68,0.30) 55%,transparent 75%); }
.flame-wrap[data-level="5"] { --glow-w:200%;  --glow-h:55%; --glow-blur:22px; --glow-bg: radial-gradient(ellipse,rgba(239,68,68,0.95) 0%,rgba(245,158,11,0.40) 50%,transparent 72%); }
/* Blue flame base glow */
.flame-wrap[data-blue="true"] .flame-base-glow { background: radial-gradient(ellipse,rgba(59,130,246,0.9) 0%,rgba(29,78,216,0.35) 50%,transparent 75%) !important; }

/* ── Super Flame SVG (levels 6+) — hides CSS divs, shows SVG ───────────────── */
.flame-wrap[data-super="true"] .flame-part { display: none; }
.flame-wrap[data-super="true"]::before,
.flame-wrap[data-super="true"]::after       { display: none; }
.flame-wrap[data-super="true"] .flame-base-glow { display: none; } /* SVG has its own ambient glow via filter */

/* .flame-svg width/height are set inline by JS (buildFlameSVG) */
.flame-svg {
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: svgBreathe var(--spd, 0.28s) ease-in-out infinite;
}

/* Individual SVG path layers — each sways at a different speed */
.sf-outer, .sf-mid, .sf-core {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.sf-outer { animation: sfSwayA var(--spd, 0.28s)               ease-in-out infinite alternate; }
.sf-mid   { animation: sfSwayB calc(var(--spd, 0.28s) * 0.75)  ease-in-out infinite alternate-reverse; }
.sf-core  { animation: sfPulse calc(var(--spd, 0.28s) * 0.48)  ease-in-out infinite alternate; }

@keyframes svgBreathe {
  0%,100% { transform: scaleX(0.97) scaleY(0.99); }
  50%     { transform: scaleX(1.03) scaleY(1.01); }
}
@keyframes sfSwayA {
  0%   { transform: rotate(-3deg) scaleX(1.00); }
  100% { transform: rotate( 3deg) scaleX(0.94); }
}
@keyframes sfSwayB {
  0%   { transform: rotate( 2.5deg) scaleY(0.95); }
  100% { transform: rotate(-2.5deg) scaleY(1.05); }
}
@keyframes sfPulse {
  0%   { transform: scaleX(0.86) scaleY(0.92); }
  100% { transform: scaleX(1.14) scaleY(1.08); }
}

/* ── Streak card layout ─────────────────────────────────────────────────────── */
.streak-display {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 6px;
  min-height: 110px;  /* flames are now JS-sized, max single flame is 96px tall */
}
.streak-numbers { display: flex; align-items: baseline; gap: 5px; padding-bottom: 4px; }
.streak-number  { font-size: 3rem; font-weight: 800; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.streak-unit    { font-size: 1rem; color: var(--text-2); font-weight: 500; }
.streak-best    { font-size: 0.8rem; color: var(--text-3); margin-top: 4px; }

.streak-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.streak-status-badge.active  { background: var(--success-bg); color: var(--success); }
.streak-status-badge.at_risk { background: var(--gold-bg);    color: var(--gold); }
.streak-status-badge.pending { background: var(--bg-card2);   color: var(--text-2); }

/* ─── Target marker on progress bar ──────────────────────────────────────────*/
.progress-track { position: relative; }

.target-marker {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  pointer-events: none;
  transition: left 0.4s ease;
}
.target-marker::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
}

.target-label {
  font-size: 0.78rem;
  color: var(--text-3);
}

/* ─── Settings modal ──────────────────────────────────────────────────────────*/
.modal-sm { max-width: 400px; }

.settings-desc {
  color: var(--text-2);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.target-slider-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.target-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
  cursor: pointer;
}
.target-slider-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 48px;
  text-align: right;
}

.color-legend {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.84rem;
  color: var(--text-2);
}
.legend-row { display: flex; align-items: center; gap: 10px; }
.legend-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-dot.red    { background: #ef4444; }
.legend-dot.orange { background: #f97316; }
.legend-dot.green  { background: #10b981; }
.legend-dot.blue   { background: #3b82f6; }
.legend-dot.none   { background: var(--bg-card2); border: 1px solid var(--border); }

.settings-msg {
  margin-top: 10px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--success);
}

/* ─── Username row in settings ───────────────────────────────────────────────*/
.username-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.username-row .input { flex: 1; }

/* ─── Leaderboard Modal ──────────────────────────────────────────────────────*/
.modal-lb { max-width: 480px; }

.lb-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-2);
  font-size: 0.9rem;
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: background 0.12s;
}
.lb-row:hover    { background: rgba(255,255,255,0.06); }
.lb-row.lb-me    {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.2);
}

.lb-medal {
  font-size: 1.1rem;
  min-width: 28px;
  text-align: center;
}
.lb-rank {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-3);
}

.lb-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-name-anon { color: var(--text-2); font-style: italic; }

.lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lb-dot.active  { background: var(--success); box-shadow: 0 0 5px var(--success); }
.lb-dot.at_risk { background: var(--gold);    box-shadow: 0 0 5px var(--gold); }
.lb-dot.pending { background: var(--text-3); }

.lb-streak {
  font-size: 0.88rem;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}
.lb-streak strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
}

.lb-best {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  flex-shrink: 0;
  text-align: center;
  gap: 1px;
}
.lb-best-label {
  font-size: 0.65rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.lb-best strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-2);
}

/* ─── Focus Block Modal ──────────────────────────────────────────────────────*/
.modal-focus { max-width: 360px; }

.focus-modal-body {
  align-items: center !important;
  text-align: center;
  padding: 24px 28px 28px !important;
  gap: 20px !important;
}

.focus-task-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The big countdown ring */
.focus-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-card2);
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 160px;
  height: 160px;
  justify-content: center;
  box-shadow: 0 0 28px var(--accent-glow), inset 0 0 20px rgba(124,58,237,0.08);
}

.focus-timer {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.focus-timer-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Grace period bar — appears when countdown hits zero */
.focus-grace-bar {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.focus-grace-num {
  font-size: 1rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}

.focus-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.focus-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  width: 100%;
}

/* "▶ Focus" button on each time-based habit row */
.habit-focus-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(124,58,237,0.12);
  color: var(--accent);
  border: 1px solid rgba(124,58,237,0.3);
  font-size: 0.76rem;
  padding: 4px 10px;
}
.habit-focus-btn:hover {
  background: rgba(124,58,237,0.22);
  color: #fff;
  border-color: var(--accent);
}
.habit-item.done .habit-focus-btn { display: none; }

/* Edit row — time_based checkbox + minutes input */
.edit-wknd-wrap { cursor: pointer; }

/* ─── ════════════════════════════════════════════════════════════════════════ */
/* ─── HISTORY PAGE ──────────────────────────────────────────────────────────── */
/* ─── ════════════════════════════════════════════════════════════════════════ */

.history-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.hist-leg-item { display: flex; align-items: center; gap: 7px; }
.hist-dot {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hist-dot.blue   { background: #3b82f6; }
.hist-dot.green  { background: #10b981; }
.hist-dot.orange { background: #f97316; }
.hist-dot.red    { background: #ef4444; }
.hist-dot.none   { background: rgba(255,255,255,0.08); border: 1px solid var(--border); }

.history-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Month block */
.hist-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hist-month-header {
  padding: 12px 18px;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Calendar grid */
.hist-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 12px;
}
.hist-day-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 0 8px;
}

.hist-day {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
  position: relative;
  transition: transform 0.1s;
  min-height: 48px;
}
.hist-day:hover { transform: scale(1.08); z-index: 2; }
.hist-day.empty { background: transparent; }

.hist-day.color-none    { background: rgba(255,255,255,0.04); }
.hist-day.color-red     { background: rgba(239,68,68,0.18);   border: 1px solid rgba(239,68,68,0.3); }
.hist-day.color-orange  { background: rgba(249,115,22,0.18);  border: 1px solid rgba(249,115,22,0.3); }
.hist-day.color-green   { background: rgba(16,185,129,0.18);  border: 1px solid rgba(16,185,129,0.3); }
.hist-day.color-blue    { background: rgba(59,130,246,0.25);  border: 1px solid rgba(59,130,246,0.5);
                           box-shadow: 0 0 10px rgba(59,130,246,0.3); }
.hist-day.color-today   { background: rgba(124,58,237,0.15);  border: 1px dashed var(--accent); }

.hist-day-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.hist-day.empty .hist-day-num { color: transparent; }

.hist-day-xp {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-2);
}
.hist-day.color-blue   .hist-day-xp { color: #93c5fd; }
.hist-day.color-green  .hist-day-xp { color: #6ee7b7; }
.hist-day.color-orange .hist-day-xp { color: #fdba74; }
.hist-day.color-red    .hist-day-xp { color: #fca5a5; }

/* Tooltip */
.hist-day[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: #fff;
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 10;
}

/* ─── ════════════════════════════════════════════════════════════════════════ */
/* ─── SQUADS PAGE ───────────────────────────────────────────────────────────── */
/* ─── ════════════════════════════════════════════════════════════════════════ */

.squads-nav-active {
  color: var(--accent) !important;
  cursor: default;
  pointer-events: none;
}

/* Two-panel grid: sidebar + detail */
.squads-main {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 58px);
}

@media (max-width: 680px) {
  .squads-main { grid-template-columns: 1fr; }
}

/* ─── Sidebar ────────────────────────────────────────────────────────────────*/
.squads-sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.squads-sidebar-inner {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.squads-sidebar-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.my-squads-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.squads-empty-text {
  font-size: 0.82rem;
  color: var(--text-3);
  padding: 6px 0;
}
.squad-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  color: var(--text);
}
.squad-card:hover { background: var(--bg-card2); }
.squad-card.active {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.4);
}
.squad-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.squad-card-meta {
  font-size: 0.75rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.squad-role-badge { font-size: 0.82rem; }

.squads-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.squad-form-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.squads-form-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.squad-form-row { display: flex; gap: 6px; }
.squad-form-row .input { flex: 1; font-size: 0.86rem; padding: 8px 10px; }
.squad-form-error {
  font-size: 0.8rem;
  color: #fca5a5;
  padding: 4px 0;
}

/* ─── Detail panel ───────────────────────────────────────────────────────────*/
.squads-detail {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.squads-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 300px;
  gap: 10px;
  padding: 40px 32px;
  text-align: center;
  color: var(--text-2);
}
.squads-empty-icon { font-size: 2.8rem; }
.squads-empty-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.squads-empty-hint  { font-size: 0.85rem; color: var(--text-3); max-width: 360px; line-height: 1.6; }
.squads-loading { color: var(--text-3); font-size: 0.9rem; }

/* Squad detail inner layout */
.squad-detail-inner {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
}

.squad-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.squad-detail-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.squad-detail-meta {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 3px;
}

/* Invite code block */
.squad-invite-block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  flex-shrink: 0;
}
.squad-invite-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}
.code-badge {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: rgba(124,58,237,0.1);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Member list */
.squad-member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.squad-member-list-header {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  gap: 10px;
}
.squad-col-name   { flex: 1; }
.squad-col-best   { min-width: 42px; text-align: center; }
.squad-col-today  { min-width: 20px; text-align: center; }
.squad-col-streak { min-width: 56px; text-align: right; }

.squad-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.squad-member-row:last-child { border-bottom: none; }
.squad-member-row:hover      { background: rgba(255,255,255,0.03); }
.squad-member-row.lb-me {
  background: rgba(124,58,237,0.08);
}

.me-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}
.squad-member-crown { margin-left: 3px; }

.squad-footer-actions {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}