.bath-stars { position: absolute; z-index: 10; top: 10px; right: 12px; border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.95); font-weight: 900; box-shadow: 0 4px 0 rgba(51,39,98,.15); }
.bath-progress { position: absolute; z-index: 10; top: 18px; left: 14px; display: flex; gap: 5px; }
.bath-progress i { width: 10px; height: 10px; border-radius: 50%; background: rgba(72,53,145,.18); }
.bath-progress i.done { background: #58c9ee; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.bath-scene { position: relative; display: grid; height: min(67vh,550px); min-height: 390px; place-items: end center; overflow: hidden; border: 7px solid #fff; border-radius: 32px; background: #d9b9df url("assets/banheiro-magico.png") center / cover; box-shadow: 0 10px 27px rgba(55,43,91,.2); isolation: isolate; }
.bath-duck { position: relative; z-index: 5; width: min(48%,280px); aspect-ratio: 1; margin-bottom: 4%; border: 0; padding: 0; background: url("assets/patinho-sprites.png") var(--sprite-x,0%) var(--sprite-y,0%) / 300% 200% no-repeat; filter: drop-shadow(0 10px 7px rgba(58,43,70,.3)); cursor: pointer; animation: bath-duck-idle 2s ease-in-out infinite; }
.bath-water { position: absolute; z-index: 4; top: 3%; left: 65%; width: 20%; height: 58%; opacity: 0; border-radius: 50%; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(185,239,255,.7) 9px 12px, transparent 13px 19px); transform: rotate(6deg); pointer-events: none; }
.bath-scene--rinse .bath-water { opacity: 1; animation: shower-water .35s linear infinite; }
.bath-scene--soap .bath-duck { animation: duck-scrub .62s ease-in-out infinite alternate; }
.bath-scene--rinse .bath-duck { animation: duck-rinse .55s ease-in-out infinite alternate; }
.bath-scene--clean .bath-duck { animation: duck-sparkle .9s ease-in-out infinite alternate; }
.bath-scene--towel .bath-duck { animation: duck-towel .65s ease-in-out infinite alternate; }
.bath-scene--party .bath-duck { animation: duck-party .7s ease-in-out infinite; }
.bath-bubbles { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.bath-bubble { position: absolute; left: var(--x); bottom: -60px; width: var(--size); height: var(--size); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: radial-gradient(circle at 31% 25%, #fff 0 7%, rgba(255,255,255,.15) 14%, rgba(143,226,255,.28) 57%, rgba(255,170,236,.32)); box-shadow: inset -3px -4px 7px rgba(125,151,245,.18), 0 0 8px rgba(255,255,255,.7); pointer-events: auto; animation: bubble-rise 5s ease-in both; }
.bath-bubble.popped { animation: bubble-pop .25s ease-out both; }
.bath-tools { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 11px 2px 5px; }
.bath-tool { height: 72px; border: 4px solid #fff; border-radius: 23px; background: linear-gradient(#fff,#e9faff); font-size: 2.4rem; cursor: pointer; box-shadow: 0 5px 0 rgba(55,45,104,.14); }
.bath-tool.wanted { outline: 5px solid #70d8f3; animation: bath-wanted 1.1s ease-in-out infinite; }
.bath-tool.hint { animation: bath-hint .42s ease-in-out 2; }
.bath-tool:active { transform: translateY(4px) scale(.97); box-shadow: 0 1px 0 rgba(55,45,104,.14); }
@keyframes bath-duck-idle { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes duck-scrub { to { transform: rotate(6deg) scale(1.04); } }
@keyframes duck-rinse { to { transform: translateY(8px) rotate(-4deg); } }
@keyframes duck-sparkle { to { transform: scale(1.08); filter: drop-shadow(0 0 18px #fff7a4); } }
@keyframes duck-towel { to { transform: rotate(-5deg) translateY(-5px); } }
@keyframes duck-party { 50% { transform: translateY(-26px) rotate(8deg); } }
@keyframes shower-water { to { background-position: 0 22px; } }
@keyframes bubble-rise { from { transform: translateX(0) scale(.65); opacity: 0; } 12% { opacity: 1; } to { transform: translate(var(--drift),-530px) scale(1.08); opacity: .15; } }
@keyframes bubble-pop { to { transform: scale(1.8); opacity: 0; } }
@keyframes bath-wanted { 50% { transform: translateY(-5px); } }
@keyframes bath-hint { 50% { transform: scale(1.14) rotate(5deg); } }
@media (max-height: 700px) { .bath-scene { height: 49vh; min-height: 330px; } }
@media (prefers-reduced-motion: reduce) { .bath-duck, .bath-tool, .bath-bubble { animation: none !important; } }