body { background-color: #ffdb58; text-align: center; font-family: "Impact", "Arial Black", sans-serif; padding: 40px; }
        
        /* High-Visibility Meme Header */
        h1 { 
            color: #cc0000; 
            font-size: 70px; 
            margin: 10px 0;
            text-transform: uppercase;
            /* The "Meme" Outline Effect */
            -webkit-text-stroke: 3px black;
            paint-order: stroke fill;
            text-shadow: 5px 5px 0px #fff;
        }

        img { 
            width: 90%; 
            max-width: 550px; 
            max-height: calc(100vh - 220px);
            height: auto;
            object-fit: contain;
            border: 20px solid #8B4513; 
            border-radius: 150px; 
            box-shadow: 0 30px 60px rgba(0,0,0,0.6);
        }

        .blink { 
            animation: blinker 2s linear infinite; 
            color: black; 
            font-size: 30px; 
            background: #fff;
            display: inline-block;
            padding: 5px 20px;
            border: 4px solid #cc0000;
        }
        @keyframes blinker { 50% { opacity: 0; } }

        .odometer {
            display: flex;
            justify-content: center; /* Horizontally center */
            align-items: center; /* Vertically center */
            gap: 4px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 32px;
            margin: 0 auto; /* Ensure centering in parent container */
            max-width: 100%; /* Avoid stretching */
        }

        .odometer span {
            background-color: #222;    /* Dark background */
            color: #ffdb58;            /* Sausage King yellow */
            padding: 10px 15px;
            border-radius: 4px;
            border: 2px solid #444;
            box-shadow: inset 0 0 10px #000, 0 0 15px #ffdb58; /* Added outer glow */
            text-shadow: 0 0 5px #ffdb58; /* Optional text glow */
        }

        .counter-mimic {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            background: #222;
            border: 2px solid #444;
            border-radius: 8px;
            box-shadow: inset 0 0 10px #000, 0 0 15px #ffdb58;
            padding: 8px 12px;
            color: #ffdb58;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 22px;
            text-shadow: 0 0 5px #ffdb58;
            width: 90%;
            max-width: 420px;
            margin: 0 auto;
            min-height: 60px;
            box-sizing: border-box;
        }

        .feedButton {
    display: inline-block;
    font-size: 24px;
    padding: 12px 24px;
    background: #cc0000;
    color: #ffffff;
    border: 3px solid #8B0000;
    border-radius: 12px;
    box-shadow: 0 5px 0 #7a0000, 0 8px 15px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.feedButton:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #7a0000, 0 5px 10px rgba(0, 0, 0, 0.25);
}

.feedButton.disabled {
    opacity: 0.6;
    pointer-events: none;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* allow page scrolling on desktop */
}

.contentWrap {
    max-height: none;
    overflow-y: visible;
    margin-bottom: 10px;
    padding-bottom: 180px; /* avoid overlap with bottom fixed feed bar */
}

@media (max-width: 640px) {
    .contentWrap {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        padding-bottom: 160px; /* preserve safe zone on smaller screens */
    }

    .counter-mimic {
        font-size: 30px;
        padding: 10px 16px;
        width: 90%;
        max-width: 420px;
        margin: 10px auto 0;
    }
}

.feedArea {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    background: rgba(255, 219, 88, 0.95);
    padding: 10px 0;
    z-index: 100;
    box-shadow: 0 -6px 12px rgba(0,0,0,0.3);
}

@media (max-width: 640px) {
    body {
        padding: 12px;
    }
    .feedArea {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        background: rgba(255, 219, 88, 0.95);
        padding: 20px 0;
        z-index: 100;
        box-shadow: 0 -6px 12px rgba(0,0,0,0.3);
    }
    .feedButton {
        width: 90%;
        max-width: 420px;
        font-size: 30px;
        padding: 16px 24px;
    }
    .flyingSausage {
        width: 140px;
        bottom: 70px;
    }
    .counter-mimic {
        margin-top: 10px;
    }

    /* iPhone & small screen sausage goal adjustment */
    #feedToggle:checked ~ .flyingSausage {
        transform: translateX(0) translateY(-420px) rotate(360deg);
    }
}

.flyingSausage {
    position: absolute;
    width: 180px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    transition: transform 1s ease-in-out;
    opacity: 0;
    border-radius: 0;
    z-index: 10;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* When the checkbox is checked, animate the sausage */
#feedToggle:checked ~ .flyingSausage {
    transform: translateX(-50%) translateY(var(--sausage-target, -260px)) rotate(360deg);
    opacity: 1;
}