/* ========================================
   RENT STREAK — DARK THEME DESIGN SYSTEM
   ======================================== */

:root {
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-tertiary: #1e293b;
  --bg-elevated: #1f2937;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.3);
  --success: #22c55e;
  --success-dim: #14532d;
  --warning: #f59e0b;
  --danger: #ef4444;
  --danger-dim: #7f1d1d;
  --love: #f472b6;
  --bank: #fbbf24;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.2);
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ========================================
   UTILITIES
   ======================================== */
.hidden { display: none !important; }

/* ========================================
   SCREENS
   ======================================== */
.screen {
  min-height: 100vh;
  width: 100%;
}

/* Auth Screen */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at top, #1e293b 0%, var(--bg-primary) 60%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.creature-preview {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  animation: float 3s ease-in-out infinite;
}

.blobby-preview { width: 100%; height: 100%; filter: drop-shadow(0 0 20px var(--accent-glow)); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.auth-card h1 {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 28px;
  line-height: 1.6;
}

#magic-link-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#magic-link-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-tertiary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  transition: var(--transition);
}

#magic-link-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Buttons */
.btn-primary, .btn-secondary {
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: white;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid #334155;
}

.btn-secondary:hover { background: #334155; }

.btn-large { padding: 16px 28px; font-size: 16px; width: 100%; }

.btn-loader {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.message {
  margin-top: 16px;
  font-size: 14px;
  min-height: 20px;
}

.message.success { color: var(--success); }
.message.error { color: var(--danger); }

.hint {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ========================================
   APP HEADER
   ======================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
}

.logo-icon { font-size: 22px; }

.header-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.icon-btn:hover { background: #334155; color: var(--text-primary); }

/* ========================================
   DASHBOARD
   ======================================== */
.dashboard {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

/* Creature Panel */
.creature-panel {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.creature-panel::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(56,189,248,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.creature-stage-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.creature-container {
  width: 180px;
  height: 180px;
  margin: 0 auto 16px;
  position: relative;
  cursor: pointer;
}

.blobby-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 24px rgba(56,189,248,0.25));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.creature-container:hover .blobby-svg { transform: scale(1.05); }
.creature-container.poked .blobby-svg { animation: poke-bounce 0.5s ease; }

@keyframes poke-bounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.85) translateY(10px); }
  60% { transform: scale(1.1) translateY(-15px); }
}

.creature-click-hint {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s;
}

.creature-container:hover .creature-click-hint { opacity: 1; }

/* Hibernation styles */
.creature-container.hibernating .blobby-svg {
  filter: grayscale(0.8) drop-shadow(0 4px 12px rgba(100,116,139,0.2));
  animation: none;
}

.creature-info { text-align: center; }

.creature-info h2 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.creature-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto 12px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-label { width: 70px; text-align: left; color: var(--text-secondary); }

.bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease, background 0.3s;
}

.bar-fill.health { background: linear-gradient(90deg, var(--danger), var(--success)); }
.bar-fill.happiness { background: linear-gradient(90deg, #6366f1, var(--love)); }

.creature-status {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  min-height: 20px;
}

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition);
}

.stat-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.1); }

.stat-icon { font-size: 24px; margin-bottom: 6px; }

.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Rent Progress */
.rent-progress-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.rent-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.rent-header h3 { font-size: 18px; font-weight: 700; }

.year-badge {
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.rent-progress-ring {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
}

.progress-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.progress-bg {
  fill: none;
  stroke: var(--bg-tertiary);
  stroke-width: 10;
}

.progress-fill {
  fill: none;
  stroke: url(#progressGradient);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.progress-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-percent {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.progress-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.rent-meta {
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.rent-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label { font-size: 12px; color: var(--text-muted); }
.meta-value { font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* Action Bar */
.action-bar {
  display: flex;
  gap: 12px;
}

.action-bar .btn-primary { flex: 1; }
.action-bar .btn-secondary { padding: 14px 18px; white-space: nowrap; }

/* Heatmap */
.heatmap-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.section-header h3 { font-size: 16px; font-weight: 700; }

.heatmap-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.legend-box {
  width: 12px; height: 12px;
  border-radius: 3px;
}

.legend-box.none { background: var(--bg-tertiary); }
.legend-box.low { background: #14532d; }
.legend-box.mid { background: var(--success); }
.legend-box.high { background: #4ade80; }
.legend-box.banked { background: var(--bank); }

.heatmap-container {
  display: grid;
  grid-template-columns: repeat(53, 1fr);
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.heatmap-day {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}

.heatmap-day:hover {
  transform: scale(1.3);
  z-index: 10;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

.heatmap-day.worked-low { background: #14532d; }
.heatmap-day.worked-mid { background: var(--success); }
.heatmap-day.worked-high { background: #4ade80; }
.heatmap-day.banked { background: var(--bank); }
.heatmap-day.missed { background: var(--danger-dim); }
.heatmap-day.future { background: var(--bg-tertiary); opacity: 0.3; }

.heatmap-day::after {
  content: attr(data-date);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.1);
}

.heatmap-day:hover::after { opacity: 1; }

/* Sessions List */
.sessions-section, .achievements-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

.text-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}

.text-btn:hover { text-decoration: underline; }

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.03);
  transition: var(--transition);
}

.session-item:hover { border-color: rgba(255,255,255,0.08); }

.session-info { display: flex; flex-direction: column; gap: 2px; }
.session-date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.session-note { font-size: 12px; color: var(--text-muted); }
.session-meta { text-align: right; }
.session-hours { font-size: 14px; font-weight: 700; color: var(--accent); }
.session-earnings { font-size: 12px; color: var(--text-secondary); }

.delete-session {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  font-size: 16px;
}

.delete-session:hover { color: var(--danger); }

/* Achievements */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid rgba(255,255,255,0.03);
  transition: var(--transition);
}

.achievement-item.unlocked {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.05);
}

.achievement-item.locked { opacity: 0.4; }

.achievement-icon { font-size: 28px; }
.achievement-name { font-size: 11px; text-align: center; color: var(--text-secondary); font-weight: 600; }

/* ========================================
   MODALS
   ======================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

.modal-header h3 { font-size: 20px; }

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover { color: var(--text-primary); }

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-tertiary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus, .form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Hours + minutes input pair */
.time-input-row {
  display: flex;
  gap: 10px;
}

.time-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding-right: 14px;
  transition: var(--transition);
}

.time-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.time-input input {
  flex: 1;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  padding: 12px 0 12px 14px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
}

.time-unit {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.form-actions button { flex: 1; }

.day-sessions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.day-sessions h4 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* ========================================
   TOAST
   ======================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 300;
  transition: transform 0.3s ease, opacity 0.3s;
}

.toast.hidden {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
}

/* ========================================
   CREATURE ANIMATIONS & STAGE ARTWORK
   ======================================== */

/* Breathing squash-and-stretch */
#blobby-body-group {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: breathe 3.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.035, 0.965); }
}

/* Blinking */
#blobby-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.6s ease-in-out infinite;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.08); }
}

/* Aura pulse (Sage only — the animation would otherwise override the
   opacity="0" attribute and show the ring on every stage) */
.aura { transform-origin: center; }
.blobby-stage-5 .aura { animation: pulse-aura 3s ease-in-out infinite; }

@keyframes pulse-aura {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* Twinkling sparkles (Sage) */
.sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 1.8s ease-in-out infinite;
}
.sparkle-2 { animation-delay: 0.6s; }
.sparkle-3 { animation-delay: 1.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

/* Floating Zzz (hibernation) */
.blobby-hibernating .zzz { animation: zfloat 2.4s ease-in-out infinite; }
.blobby-hibernating .zzz-2 { animation-delay: 0.5s; }
.blobby-hibernating .zzz-3 { animation-delay: 1s; }

@keyframes zfloat {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Smooth transitions for shape & geometry morphing */
#blobby-body { transition: d 0.5s ease; }
#blobbyGradient stop { transition: stop-color 0.6s ease; }

#blobby-belly, #blobby-shadow, .blobby-arm, .blobby-foot {
  transition: cx 0.5s ease, cy 0.5s ease, rx 0.5s ease, ry 0.5s ease, opacity 0.4s ease;
}

#blobby-sprout, #blobby-tuft, #blobby-sparkles, #blobby-nightcap, #blobby-accessories {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#blobby-face { transition: transform 0.3s ease; }

/* ---------- Evolution stage shapes ---------- */
.blobby-stage-1 #blobby-body {
  d: path("M100,60 C130,60 150,85 150,115 C150,145 130,165 100,165 C70,165 50,145 50,115 C50,85 70,60 100,60Z");
}

.blobby-stage-2 #blobby-body {
  d: path("M100,45 C135,45 165,70 165,110 C165,150 135,175 100,175 C65,175 35,150 35,110 C35,70 65,45 100,45Z");
}

.blobby-stage-3 #blobby-body {
  d: path("M100,40 C140,40 170,70 170,110 C170,145 150,170 120,175 C110,180 90,180 80,175 C50,170 30,145 30,110 C30,70 60,40 100,40Z");
}

.blobby-stage-4 #blobby-body {
  d: path("M100,35 C145,35 175,65 175,105 C175,140 160,170 130,178 C120,182 110,185 100,185 C90,185 80,182 70,178 C40,170 25,140 25,105 C25,65 55,35 100,35Z");
}

.blobby-stage-5 #blobby-body {
  d: path("M100,30 C150,30 180,60 180,100 C180,135 165,170 130,180 C120,185 110,188 100,188 C90,188 80,185 70,180 C35,170 20,135 20,100 C20,60 50,30 100,30Z");
}

/* ---------- Stage color palettes ---------- */
.blobby-stage-1 #bg-stop-1 { stop-color: #a5f3fc; } /* Egg: light cyan */
.blobby-stage-1 #bg-stop-2 { stop-color: #38bdf8; }
.blobby-stage-1 #bg-stop-3 { stop-color: #2563eb; }

.blobby-stage-2 #bg-stop-1 { stop-color: #6ee7b7; } /* Hatchling: mint-teal */
.blobby-stage-2 #bg-stop-2 { stop-color: #2dd4bf; }
.blobby-stage-2 #bg-stop-3 { stop-color: #0ea5e9; }

.blobby-stage-3 #bg-stop-1 { stop-color: #c4b5fd; } /* Teen: violet */
.blobby-stage-3 #bg-stop-2 { stop-color: #818cf8; }
.blobby-stage-3 #bg-stop-3 { stop-color: #6366f1; }

.blobby-stage-4 #bg-stop-1 { stop-color: #a5b4fc; } /* Adult: deep indigo */
.blobby-stage-4 #bg-stop-2 { stop-color: #6366f1; }
.blobby-stage-4 #bg-stop-3 { stop-color: #7c3aed; }

.blobby-stage-5 #bg-stop-1 { stop-color: #fcd34d; } /* Sage: regal gold-violet */
.blobby-stage-5 #bg-stop-2 { stop-color: #a78bfa; }
.blobby-stage-5 #bg-stop-3 { stop-color: #6d28d9; }

/* ---------- Stage geometry (belly, arms, feet, shadow) ---------- */
/* Egg: no limbs */
.blobby-stage-1 .blobby-arm, .blobby-stage-1 .blobby-foot { opacity: 0; }
.blobby-stage-1 #blobby-belly { cx: 100; cy: 126; rx: 20; ry: 14; }
.blobby-stage-1 #blobby-shadow { rx: 42; }
.blobby-stage-1 #blobby-shine { cy: 74; }

/* Hatchling */
.blobby-stage-2 #blobby-belly { cy: 132; rx: 26; ry: 19; }
.blobby-stage-2 #arm-left { cx: 40; cy: 120; }
.blobby-stage-2 #arm-right { cx: 160; cy: 120; }
.blobby-stage-2 .blobby-foot { cy: 170; }
.blobby-stage-2 #blobby-sprout { opacity: 1; }

/* Teen */
.blobby-stage-3 #blobby-belly { cy: 135; rx: 30; ry: 21; }
.blobby-stage-3 #arm-left { cx: 34; cy: 124; }
.blobby-stage-3 #arm-right { cx: 166; cy: 124; }
.blobby-stage-3 .blobby-foot { cy: 176; }
.blobby-stage-3 #blobby-shadow { rx: 54; }
.blobby-stage-3 #blobby-tuft { opacity: 1; }

/* Adult */
.blobby-stage-4 #blobby-belly { cy: 137; rx: 33; ry: 23; }
.blobby-stage-4 #arm-left { cx: 29; cy: 126; }
.blobby-stage-4 #arm-right { cx: 171; cy: 126; }
.blobby-stage-4 .blobby-foot { cy: 181; }
.blobby-stage-4 #blobby-shadow { rx: 58; }

/* Sage */
.blobby-stage-5 #blobby-belly { cy: 139; rx: 36; ry: 25; }
.blobby-stage-5 #arm-left { cx: 24; cy: 128; }
.blobby-stage-5 #arm-right { cx: 176; cy: 128; }
.blobby-stage-5 .blobby-foot { cy: 184; }
.blobby-stage-5 #blobby-shadow { rx: 62; }
.blobby-stage-5 #blobby-accessories { transform: translateY(-5px); }
.blobby-stage-5 #blobby-sparkles { opacity: 1; }

/* ---------- Hibernation ---------- */
.blobby-hibernating #blobby-body-group { animation: none; }
.blobby-hibernating #blobby-eyes { animation: none; }
.blobby-hibernating #blobby-body { fill: #475569 !important; }
.blobby-hibernating #eye-left, .blobby-hibernating #eye-right {
  ry: 1;
  opacity: 0.5;
}
.blobby-hibernating #pupil-left, .blobby-hibernating #pupil-right,
.blobby-hibernating .eye-glint { opacity: 0; }
.blobby-hibernating #mouth {
  d: path("M 90 130 Q 100 125 110 130");
  stroke: #64748b;
}
.blobby-hibernating #blobby-nightcap { opacity: 1; }

/* Responsive */
@media (min-width: 640px) {
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .modal { align-items: center; }
  .modal-content { border-radius: var(--radius-xl); max-height: 85vh; }
}

@media (max-width: 400px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .heatmap-container { gap: 2px; }
  .creature-container { width: 140px; height: 140px; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }