/* ══════════════════════════════════════════════════════════════
   SENSORS - Water meter, shake effects, step display
   ══════════════════════════════════════════════════════════════ */

/* Water meter overlay for tilt-to-water */
.water-meter-overlay {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 40px;
    height: 160px;
    z-index: 180;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.water-meter-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.water-meter-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 250, 240, 0.9);
    border: 2px solid rgba(90, 70, 50, 0.4);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.water-meter-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(
        0deg,
        #5b9bd5 0%,
        #7ab8e0 60%,
        #a0d4f0 100%
    );
    border-radius: 0 0 18px 18px;
    transition: height 0.1s linear;
}

.water-meter-label {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #5a4a3a;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
}

/* Shake wobble animation (applied to garden wrapper briefly) */
@keyframes shakeWobble {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    20% { transform: translateX(-50%) rotate(-1deg); }
    40% { transform: translateX(-50%) rotate(1deg); }
    60% { transform: translateX(-50%) rotate(-0.5deg); }
    80% { transform: translateX(-50%) rotate(0.5deg); }
}

.garden-wrapper.shaking {
    animation: shakeWobble 0.4s ease-in-out;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .water-meter-container {
        background: rgba(40, 35, 30, 0.9);
        border-color: rgba(180, 160, 130, 0.4);
    }
    .water-meter-label {
        color: #c0b5a5;
    }
}