/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --pink:         #FFB3C6;
  --pink-dark:    #FF8FAB;
  --pink-light:   #FFD6E7;
  --pink-bg:      #FFF5F8;
  --lavender:     #C8B6E2;
  --lavender-dark:#9B8EC4;
  --mint:         #B5EAD7;
  --mint-dark:    #7BCBA5;
  --card:         #FFFFFF;
  --text:         #3D2B3D;
  --text-muted:   #9B7A9B;
  --radius:       20px;
  --shadow:       0 4px 20px rgba(180, 80, 130, 0.12);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--pink-bg);
  color: var(--text);
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 96px;
  overflow-x: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(180deg, #FFD6E7 0%, #F8E4F0 60%, var(--pink-bg) 100%);
  text-align: center;
  padding: 20px 20px 12px;
}

.bunny-svg {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 6px 14px rgba(255, 100, 150, 0.22));
  transition: transform 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform;
}

/* ── Bunny States ──────────────────────────────────────────────────────────── */
.bunny-svg .cheek {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.bunny-svg .mouth-happy {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.bunny-svg .mouth-neutral {
  transition: opacity 0.35s ease;
}
.bunny-svg .arm {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State: some items checked → rosy cheeks begin */
.bunny-svg.state-progress .cheek {
  opacity: 0.45;
}

/* State: half+ done → full cheeks + happy mouth */
.bunny-svg.state-happy .cheek {
  opacity: 0.75;
}
.bunny-svg.state-happy .mouth-happy  { opacity: 1; }
.bunny-svg.state-happy .mouth-neutral { opacity: 0; }

/* State: all done → full joy + dance */
.bunny-svg.state-done .cheek {
  opacity: 1;
}
.bunny-svg.state-done .mouth-happy  { opacity: 1; }
.bunny-svg.state-done .mouth-neutral { opacity: 0; }

/* Arms shoot up when done */
.bunny-svg.state-done .arm-left {
  transform: rotate(-110deg) translateY(4px);
}
.bunny-svg.state-done .arm-right {
  transform: rotate(110deg) translateY(4px);
}

/* Full dance: jump + wiggle + scale pulse */
.bunny-svg.state-done {
  animation: bunny-dance 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes bunny-dance {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1);    }
  20%  { transform: translateY(-18px) rotate(-8deg)  scale(1.08); }
  40%  { transform: translateY(-22px) rotate(8deg)   scale(1.1);  }
  60%  { transform: translateY(-14px) rotate(-6deg)  scale(1.07); }
  80%  { transform: translateY(-18px) rotate(6deg)   scale(1.08); }
  100% { transform: translateY(0)    rotate(0deg)   scale(1);    }
}

.app-title {
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  font-weight: 900;
  color: var(--text);
  margin-top: 8px;
  letter-spacing: -0.5px;
}

.app-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Day Selector ──────────────────────────────────────────────────────────── */
.day-selector {
  display: flex;
  gap: 8px;
  padding: 14px 14px 0;
  justify-content: center;
}

.day-btn {
  flex: 1;
  max-width: 68px;
  padding: 10px 4px;
  border: 2.5px solid var(--pink-light);
  background: var(--card);
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.day-btn:hover {
  border-color: var(--pink);
  color: var(--text);
  transform: translateY(-2px);
}

.day-btn.active {
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(255, 100, 150, 0.42);
  transform: translateY(-2px) scale(1.06);
}

/* ── Progress ──────────────────────────────────────────────────────────────── */
.progress-section {
  padding: 16px 18px 4px;
}

.progress-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 10px;
  min-height: 1.4em;
  transition: color 0.3s ease;
}

.progress-text.all-done {
  color: var(--mint-dark);
}

.progress-track {
  position: relative;
  height: 22px;
  background: var(--pink-light);
  border-radius: 50px;
  overflow: visible;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mint) 0%, var(--lavender) 60%, var(--pink) 100%);
  border-radius: 50px;
  transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 0%;
}

.progress-bunny {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -58%);
  font-size: 24px;
  transition: left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
  z-index: 2;
}

/* ── Checklist ─────────────────────────────────────────────────────────────── */
.checklist {
  list-style: none;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2.5px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  min-height: 66px;
  opacity: 0;
  animation: slide-in 0.32s ease forwards;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.checklist-item:active {
  transform: scale(0.97);
}

.checklist-item.checked {
  background: linear-gradient(135deg, #F0FFF8, #E6F8F0);
  border-color: var(--mint);
}

/* Checkbox circle */
.item-checkbox {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--pink-light);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.checklist-item.checked .item-checkbox {
  background: var(--mint);
  border-color: var(--mint-dark);
  box-shadow: 0 2px 8px rgba(123, 203, 165, 0.4);
}

/* Animated checkmark */
.item-checkmark {
  width: 18px;
  height: 18px;
}

.checkmark-path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.32s ease 0.06s;
}

.checklist-item.checked .checkmark-path {
  stroke-dashoffset: 0;
}

/* Emoji + name */
.item-emoji {
  font-size: 1.85rem;
  flex-shrink: 0;
  line-height: 1;
}

.item-name {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  transition: all 0.25s ease;
}

.checklist-item.checked .item-name {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Done badge */
.item-done-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: var(--mint-dark);
  border-radius: 50px;
  padding: 2px 9px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  margin-left: auto;
}

/* Every-day badge */
.item-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--lavender-dark);
  background: #EDE8F7;
  border-radius: 50px;
  padding: 2px 8px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 10px 14px 14px;
  background: linear-gradient(to top, var(--pink-bg) 75%, transparent);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.btn-reset,
.btn-notify,
.btn-share {
  flex: 1;
  padding: 14px 8px;
  border: none;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset {
  background: white;
  color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.btn-reset:hover {
  background: var(--pink-light);
  color: var(--text);
}

.btn-notify {
  background: linear-gradient(135deg, var(--lavender), var(--lavender-dark));
  color: white;
  box-shadow: 0 4px 14px rgba(155, 142, 196, 0.42);
}

.btn-notify:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(155, 142, 196, 0.5);
}

.btn-notify:disabled {
  opacity: 0.75;
  cursor: default;
  transform: none;
}

.btn-share {
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: white;
  box-shadow: 0 4px 14px rgba(123, 203, 165, 0.42);
}

.btn-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(123, 203, 165, 0.5);
}

/* ── Celebration Overlay ───────────────────────────────────────────────────── */
.celebration {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 214, 231, 0.96) 0%,
    rgba(200, 182, 226, 0.96) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.celebration.active {
  opacity: 1;
  pointer-events: all;
}

.celebration-inner {
  text-align: center;
  padding: 32px 24px;
  transform: scale(0.75);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebration.active .celebration-inner {
  transform: scale(1);
}

.celebration-emoji {
  font-size: 3rem;
  animation: pop 0.55s ease infinite alternate;
}

/* Big dancing bunny in celebration */
.bunny-svg--big {
  width: 170px;
  height: auto;
  margin: 4px auto 0;
  filter: drop-shadow(0 8px 20px rgba(255, 100, 150, 0.35));
}

@keyframes pop {
  from { transform: translateY(0)    scale(1);    }
  to   { transform: translateY(-12px) scale(1.08); }
}

.celebration-inner h2 {
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 900;
  color: var(--text);
  margin: 10px 0 6px;
}

.celebration-inner p {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.stars {
  font-size: 2rem;
  margin: 6px 0 22px;
  letter-spacing: 4px;
}

.btn-again {
  padding: 16px 44px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--pink-dark), #D4607A);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255, 100, 150, 0.42);
  transition: all 0.22s ease;
}

.btn-again:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 30px rgba(255, 100, 150, 0.5);
}

/* ── Confetti ──────────────────────────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  top: -24px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background: var(--color);
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
  pointer-events: none;
  z-index: 200;
}

@keyframes confetti-fall {
  0% {
    top: -24px;
    transform: rotate(0deg) translateX(0);
    opacity: 1;
  }
  80% { opacity: 1; }
  100% {
    top: 110vh;
    transform: rotate(720deg) translateX(60px);
    opacity: 0;
  }
}

/* ── Responsive tweaks ─────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  body {
    padding-top: 16px;
    box-shadow: 0 0 60px rgba(200, 80, 130, 0.08);
  }
  .app-header {
    border-radius: 0 0 36px 36px;
  }
}

@media (max-width: 360px) {
  .item-badge { display: none; }
  .item-emoji { font-size: 1.5rem; }
}