html { -webkit-tap-highlight-color: transparent; }
body {
  background-image:
    radial-gradient(circle at 10% 0%, #e8efe4 0, transparent 40%),
    radial-gradient(circle at 100% 30%, #e3eef8 0, transparent 35%),
    radial-gradient(circle at 0% 100%, #fde9dd 0, transparent 35%);
  background-attachment: fixed;
}

.action-btn {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .5rem .6rem; border-radius: 9999px;
  font-size: .8rem; font-weight: 800; transition: all .2s ease;
}
.action-btn:active { transform: scale(.96); }

.progress-fill {
  background: linear-gradient(90deg, #b5cba9, #94b285, #789a68);
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
  animation: shimmer 3s linear infinite;
}
.progress-fill.done { background: linear-gradient(90deg, #f2a57d, #f7c873, #94b285, #8fb6dd); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Category card */
.cat-card { transition: box-shadow .2s ease, transform .2s ease; }
.cat-card.complete { border-color: #b5cba9; }
.cat-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.cat-card.collapsed .cat-body { grid-template-rows: 0fr; }
.cat-body > div { overflow: hidden; }
.cat-chevron { transition: transform .3s ease; }
.cat-card.collapsed .cat-chevron { transform: rotate(-90deg); }

.check-item { transition: background .2s ease; }
.check-box {
  width: 1.5rem; height: 1.5rem; border-radius: .55rem; flex-shrink: 0;
  border: 2px solid #d3e0cc; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.check-box svg { width: 1rem; height: 1rem; color: #fff; transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.check-item.checked .check-box { background: #789a68; border-color: #789a68; transform: scale(1.05); }
.check-item.checked .check-box svg { transform: scale(1); }
.check-item.checked .item-label { color: #a4917f; text-decoration: line-through; text-decoration-color: #b5cba9; text-decoration-thickness: 2px; }
.check-item.checked { background: #f5f8f2; }

.modal-pop { animation: pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%);
  background: #3f2f25; color: #fff; font-weight: 700; font-size: .85rem;
  padding: .6rem 1.1rem; border-radius: 9999px; z-index: 60;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.toast.show { transform: translate(-50%, 0); }

/* ================= DOG MASCOT ================= */
.dog-wrap { position: relative; width: 88px; height: 75px; }
@media (min-width: 640px) { .dog-wrap { width: 130px; height: 110px; } .dog-bubble { font-size: .9rem; } }
.dog-svg { width: 100%; height: 100%; overflow: visible; }
.dog-svg * { transform-box: fill-box; }

.dog-bubble {
  position: relative; display: inline-block; margin-left: 8px;
  background: #fff; border: 2px solid #e8efe4; color: #5b4436;
  font-size: .75rem; font-weight: 800; line-height: 1.25;
  padding: .45rem .7rem; border-radius: 1rem; box-shadow: 0 6px 18px -8px rgba(91,68,54,.3);
  animation: bubble-in .4s cubic-bezier(.34,1.56,.64,1);
}
.dog-bubble::after {
  content: ''; position: absolute; right: 100%; top: 50%; margin-top: -7px;
  border: 7px solid transparent; border-right-color: #fff;
}
.dog-bubble.bump { animation: bubble-in .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes bubble-in { from { transform: scale(.6) translateY(8px); opacity: 0; } }


/* default hidden parts */
.eyes-happy, .eyes-sleep, .mouth-open, .party-hat, .dog-bowl, .zzz { opacity: 0; transition: opacity .3s; }
.eyes-open, .mouth-flat { transition: opacity .3s; }
.dog-body-group, .dog-head, .dog-tail, .dog-legs { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.dog-tail { transform-origin: 100% 100%; }
.ear-l { transform-origin: 80% 10%; } .ear-r { transform-origin: 20% 10%; }

/* --- SLEEP (0-30) --- */
.state-sleep .eyes-open, .state-sleep .mouth-flat { opacity: 0; }
.state-sleep .eyes-sleep, .state-sleep .mouth-flat { opacity: 1; }
.state-sleep .zzz { opacity: 1; }
.state-sleep .dog-head { transform: translate(-6px, 30px) rotate(-8deg); }
.state-sleep .dog-legs { transform: translateY(-6px) scaleY(.6); }
.state-sleep .dog-body { animation: breathe 3s ease-in-out infinite; transform-origin: center; }
.state-sleep .dog-tail { transform: rotate(-60deg) translate(6px, 14px); }
.state-sleep .ear-l { transform: rotate(10deg); } .state-sleep .ear-r { transform: rotate(-10deg); }
.state-sleep .z1 { animation: zfloat 2.4s ease-in-out infinite; }
.state-sleep .z2 { animation: zfloat 2.4s ease-in-out .5s infinite; }
.state-sleep .z3 { animation: zfloat 2.4s ease-in-out 1s infinite; }
@keyframes breathe { 50% { transform: scale(1.04, .96); } }
@keyframes zfloat { 0%,100% { opacity: .2; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }

/* --- SIT (31-70) --- */
.state-sit .dog-head { transform: translateY(4px); animation: headtilt 3s ease-in-out infinite; }
.state-sit .dog-tail { animation: wag 1.2s ease-in-out infinite; }
.state-sit .dog-legs { transform: translateY(-2px) scaleY(.85); }
.state-sit .eyes-open { animation: blink 4s infinite; transform-origin: center; }
@keyframes headtilt { 0%,100% { transform: translateY(4px) rotate(0); } 50% { transform: translateY(4px) rotate(6deg); } }

/* --- STAND (71-99) --- */
.state-stand .eyes-happy, .state-stand .mouth-open { opacity: 1; }
.state-stand .eyes-open, .state-stand .mouth-flat { opacity: 0; }
.state-stand .dog-body-group { transform: translateY(-4px); }
.state-stand .dog-tail { animation: wag .35s ease-in-out infinite; }
.state-stand .dog-head { animation: bob .7s ease-in-out infinite; }
.state-stand .ear-l { animation: flop .7s ease-in-out infinite; }
.state-stand .ear-r { animation: flop2 .7s ease-in-out infinite; }

/* --- PARTY (100) --- */
.state-party .eyes-happy, .state-party .mouth-open, .state-party .party-hat, .state-party .dog-bowl { opacity: 1; }
.state-party .eyes-open, .state-party .mouth-flat { opacity: 0; }
.state-party .dog-body-group { animation: jump .8s cubic-bezier(.3,.7,.4,1) infinite; }
.state-party .dog-shadow { animation: shadow .8s cubic-bezier(.3,.7,.4,1) infinite; transform-origin: center; }
.state-party .dog-tail { animation: wag .25s ease-in-out infinite; }
.state-party .ear-l { animation: flop .4s ease-in-out infinite; }
.state-party .ear-r { animation: flop2 .4s ease-in-out infinite; }
.state-party .bone-snack { animation: munch 1.6s ease-in-out infinite; transform-origin: center; }
.state-party-bubble { background: #fffbe8 !important; border-color: #f7c873 !important; }
.state-party-bubble::after { border-right-color: #fffbe8 !important; }

@keyframes wag { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(22deg); } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes flop { 50% { transform: rotate(-14deg); } }
@keyframes flop2 { 50% { transform: rotate(14deg); } }
@keyframes jump { 0%,100% { transform: translateY(0) scaleY(1); } 10% { transform: translateY(2px) scale(1.05,.92); } 45% { transform: translateY(-26px) scale(.97,1.04); } 80% { transform: translateY(0); } }
@keyframes shadow { 45% { transform: scale(.6); opacity: .5; } }
@keyframes munch { 0%,100% { transform: scale(1) rotate(0); } 25% { transform: scale(.85) rotate(-8deg); } 50% { transform: scale(1.05) rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}