/* Follow the existing button colors: food, play, clean, rest, and cuddle. */
.care-action[data-care="feed"],.care-first-sparkles[data-care="feed"] {--care-accent:#c99056;--care-soft:#ecc29a;--care-glint:#fff1d9;--care-glow:#c9905666}
.care-action[data-care="play"],.care-first-sparkles[data-care="play"] {--care-accent:#a190b6;--care-soft:#cfc0e6;--care-glint:#f8efff;--care-glow:#a190b666}
.care-action[data-care="wash"],.care-first-sparkles[data-care="wash"] {--care-accent:#83aab9;--care-soft:#b5dce8;--care-glint:#effcff;--care-glow:#83aab966}
.care-action[data-care="rest"],.care-first-sparkles[data-care="rest"] {--care-accent:#8b9cbe;--care-soft:#bfceed;--care-glint:#f0f4ff;--care-glow:#8b9cbe66}
.care-action[data-care="cuddle"],.care-first-sparkles[data-care="cuddle"] {--care-accent:#d397a2;--care-soft:#efbfcb;--care-glint:#fff0f4;--care-glow:#d397a266}
.care-action > .care-discovery-ring {
 position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);
 overflow:visible;pointer-events:none;z-index:2;
}
.care-discovery-ring rect {width:calc(100% - 4px);height:calc(100% - 4px);fill:none;stroke-linecap:round}
.care-ring-track {stroke:var(--care-accent);stroke-width:1.5;opacity:.72;filter:drop-shadow(0 0 2px var(--care-glow))}
.care-ring-trail {stroke:var(--care-accent);stroke-width:2.2;stroke-dasharray:16 84;opacity:0;animation:care-border-trace 18s linear var(--care-cue-delay,0s) infinite}
.care-ring-spark {stroke:var(--care-glint);stroke-width:3.5;stroke-dasharray:1.2 98.8;filter:drop-shadow(0 0 3px var(--care-accent));opacity:0;animation:care-border-spark 18s linear var(--care-cue-delay,0s) infinite}
@keyframes care-border-trace {0%{stroke-dashoffset:0;opacity:.9}18%{opacity:.9}20%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes care-border-spark {0%{stroke-dashoffset:-15;opacity:1}18%{opacity:1}20%,100%{stroke-dashoffset:-115;opacity:0}}
/* Keep phases aligned while unavailable buttons are hidden. No polling is needed. */
.care-action:disabled > .care-discovery-ring {visibility:hidden}
.care-discovery-paused .care-discovery-ring rect {animation-play-state:paused}

/* A brief celebration on every ready press, outside the button so page updates cannot cut it off. */
.care-first-sparkles {position:fixed;width:0;height:0;pointer-events:none;z-index:1000;isolation:isolate}
.care-first-sparkles i {position:absolute;display:block;pointer-events:none}
.care-sparkle-halo {width:54px;height:54px;left:-27px;top:-27px;border:2px solid var(--care-soft);border-radius:50%;box-shadow:0 0 14px var(--care-glow);animation:care-touch-halo .65s ease-out both}
.care-sparkle-star,.care-sparkle-dot {width:11px;height:11px;left:-5.5px;top:-5.5px;background:var(--spark-color);animation:care-touch-spark .84s cubic-bezier(.12,.6,.3,1) var(--spark-delay) both}
.care-sparkle-star {clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
.care-sparkle-dot {width:5px;height:5px;left:-2.5px;top:-2.5px;border-radius:50%}
@keyframes care-touch-halo {0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(1.8)}}
@keyframes care-touch-spark {
 0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
 18%{opacity:1}
 70%{opacity:.9}
 100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.35) rotate(var(--spark-turn))}
}
@media(prefers-reduced-motion:reduce) {
 .care-discovery-ring .care-ring-trail,.care-discovery-ring .care-ring-spark {animation:none}
 .care-discovery-ring .care-ring-trail {stroke-dasharray:none;opacity:.7}
 .care-discovery-ring .care-ring-spark,.care-first-sparkles {display:none}
}
html[data-motion="off"] .care-discovery-ring rect {animation:none}
html[data-motion="off"] .care-ring-trail {stroke-dasharray:none;opacity:.7}
html[data-motion="off"] .care-ring-spark,html[data-motion="off"] .care-first-sparkles {display:none}