/* ===========================================
   JAR CONTROLLER
   Central configuration for all jar components
   
   Change --jar-width and --jar-height to resize.
   All sub-components scale proportionally.
   =========================================== */

.jar-wrapper {
    /* Appearance */
    --jar-glass: rgba(255, 255, 255, 0.08);
    --jar-border: rgba(255, 255, 255, 0.2);
    --jar-shine: rgba(255, 255, 255, 0.08);
    --jar-rounded-corner: 20px;
    --jar-padding: 10px;
    
    /* Base dimensions */
    --jar-width: 350px;
    --jar-height: 340px;
    
    /* Equal spacing above and below jar - controlled by Gap sliders */
    margin-top: 20px;
    margin-bottom: 20px;
    
    /* Calculated component dimensions - components chain top-to-bottom */
    /* All positions/heights are ratios of base dimensions for scalability */
    --jar-lid-top: calc(var(--jar-height) * 0.053);
    --jar-lid-height: calc(var(--jar-height) * 0.07);
    --jar-lid-width: calc(var(--jar-width) * 0.44);
    --jar-neck-top: calc(var(--jar-height) * 0.076);
    --jar-neck-height: calc(var(--jar-height) * 0.10);
    --jar-neck-width: calc(var(--jar-width) * 0.40);
    --jar-shoulder-top: calc(var(--jar-neck-top) + var(--jar-neck-height)); /* Starts where neck ends */
    --jar-shoulder-height: var(--jar-rounded-corner);
    --jar-shoulder-width: calc(var(--jar-width) * 0.93);
    --jar-body-top: calc(var(--jar-shoulder-top) + var(--jar-shoulder-height)); /* Starts where shoulder ends */
    --jar-body-width: var(--jar-shoulder-width);
    --jar-body-height: calc(var(--jar-height) - var(--jar-body-top)); /* Fills from body-top to bottom */
    --jar-marbles-area-width: calc(var(--jar-body-width) - var(--jar-padding) * 2);
    --jar-marbles-area-height: calc(var(--jar-body-height) - var(--jar-padding) * 2);
    
    /* Layout */
    position: relative;
    width: var(--jar-width);
    height: var(--jar-height);
    overflow: visible; /* Allow spilled marbles to render outside wrapper */
}