/* ===========================================
   JAR RESPONSIVE STYLES
   
   The jar uses CSS transform: scale() on mobile to:
   1. Keep internal dimensions constant (350x340) for consistent physics
   2. Scale down visually to fit smaller screens
   
   This ensures the same marble capacity on all devices while
   preventing visual overflow/cutoff.
   =========================================== */

@media (max-width: 600px) {
    .jar-wrapper {
        --jar-rounded-corner: 15px;
        
        /* Scale down to fit mobile screens while keeping internal dimensions */
        /* 0.85 = fits nicely on 375px wide screens (iPhone) */
        transform: scale(0.85);
        transform-origin: top center;
        
        /* Adjust margin to account for scaled size */
        margin-bottom: -50px;
    }
}

@media (max-width: 400px) {
    .jar-wrapper {
        /* Even smaller screens need more scaling */
        transform: scale(0.75);
        margin-bottom: -85px;
    }
}