* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure Bangers font loads properly */
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

html, body {
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    color: white;
    background-color: #000000;
    /* Layout base so future UI can center content if needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Responsive background system with 3 breakpoints */
:root {
    /* Mobile to tablet transition */
    --mobileToTabletStart: 480px;
    --mobileToTabletEnd: 768px;
    --mobileToTabletT: calc((100vw - var(--mobileToTabletStart)) / (var(--mobileToTabletEnd) - var(--mobileToTabletStart)));
    --mobileOpacity: clamp(0, calc(1 - var(--mobileToTabletT)), 1);
    --tabletOpacity: clamp(0, var(--mobileToTabletT), 1);
    
    /* Tablet to desktop transition */
    --tabletToDesktopStart: 1024px;
    --tabletToDesktopEnd: 1280px;
    --tabletToDesktopT: calc((100vw - var(--tabletToDesktopStart)) / (var(--tabletToDesktopEnd) - var(--tabletToDesktopStart)));
    --tabletOpacityFinal: clamp(0, calc(var(--tabletOpacity) * (1 - var(--tabletToDesktopT))), 1);
    --desktopOpacity: clamp(0, var(--tabletToDesktopT), 1);
}

/* Mobile background layer */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('assets/background-mobile.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #000000;
    opacity: var(--mobileOpacity);
    will-change: opacity;
    transition: opacity 0.3s ease;
    z-index: -2;
}

/* Tablet background layer */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('assets/background-tablet.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #000000;
    opacity: var(--tabletOpacityFinal);
    will-change: opacity;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* Desktop background layer - using a pseudo-element on html */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('assets/background-desktop.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #000000;
    opacity: var(--desktopOpacity);
    will-change: opacity;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Hard clamps at extremes (ensures correct image outside blend window) */
@media (max-width: 480px) {
    body::before { opacity: 1; }
    body::after { opacity: 0; }
    html::before { opacity: 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body::before { opacity: 0; }
    body::after { opacity: 1; }
    html::before { opacity: 0; }
}

@media (min-width: 1280px) {
    body::before { opacity: 0; }
    body::after { opacity: 0; }
    html::before { opacity: 1; }
}

/* AdSense Container Styling */
.ad-container {
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: Top and Bottom Ads (320x100) */
.ad-top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 100px;
    padding: 0;
}

.ad-bottom {
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 100px;
    padding: 0;
}

/* Tablet: Top and Bottom Ads (728x90 Leaderboard) */
@media (min-width: 768px) and (max-width: 1279px) {
    .ad-top,
    .ad-bottom {
        width: 728px;
        height: 90px;
    }
}

/* Desktop: Left and Right Sidebar Ads (160×600 Wide Skyscraper) */
.ad-left,
.ad-right {
    display: none;
}

@media (min-width: 1280px) {
    /* Hide top/bottom ads on desktop */
    .ad-top,
    .ad-bottom {
        display: none;
    }

    /* Show sidebar ads on desktop */
    .ad-left,
    .ad-right {
        display: flex;
        width: 160px;
        height: 600px;
        top: 50%;
        transform: translateY(-50%);
    }

    .ad-left {
        left: 20px;
    }

    .ad-right {
        right: 20px;
    }
}

/* AdSense responsive ad units */
.ad-container .adsbygoogle {
    display: block;
    width: 100%;
    height: 100%;
}

/* Slot machine frame elements */
.slot-machine-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 25px)); /* Move up by half footer height to avoid overlap */
    z-index: 10;
    pointer-events: auto;
    width: 432px;
    height: 540px;
    max-height: calc(100vh - 100px); /* Prevent overflow: viewport - (footer 50px + top margin 50px) */
}

/* Responsive sizing - larger on desktop */
@media (min-width: 768px) {
    .slot-machine-container {
        width: 720px;
        height: 900px;
        transform: translate(-50%, calc(-45% - 35px)); /* Adjust upward to clear footer */
        max-height: calc(100vh - 100px);
    }

    .enter-food {
        font-size: 58px;
    }

    .spin-button {
        font-size: 72px;
        height: 90px;
    }

    .start-over-button {
        font-size: 66px;
        height: 90px;
        width: 35%;
    }

    .vote-btn {
        height: 90px;
    }
}

@media (min-width: 1024px) {
    .slot-machine-container {
        width: 800px;
        height: 1000px;
        transform: translate(-50%, calc(-50% - 50px)); /* Move up by full footer height */
        max-height: calc(100vh - 120px); /* Extra space for larger container */
    }

    .enter-food {
        font-size: 60px;
    }

    .spin-button {
        font-size: 60px;
        height: 140px;
    }

    .start-over-button {
        font-size: 60px;
        height: 140px;
        width: 40%;
    }

    .vote-btn {
        height: 140px;
    }

    .vote-container {
        bottom: 15%;
    }
}

.frame-background {
    position: absolute;
    top: 54.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 40%;
    background-image: url('assets/frame-background.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    display: block; /* restore background */
}

.spinner-container {
    position: absolute;
    top: 54.2%;
    transform: translateY(-50%);
    width: 24%; /* 1/3 of the total width */
    height: 31%;
    overflow: hidden;
    z-index: 5;
}

.reel-1-container {
    left: 14%; /* left position for reel 1 */
}

.reel-2-container {
    left: 50%;
    transform: translate(-50%, -50%); /* center reel 2 */
}

.reel-3-container {
    right: 14%; /* right position for reel 3 */
}

.spinner-reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.reel-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    will-change: transform;
    transform: translateZ(0); /* force GPU compositing to avoid seams */
}

/* Neutral base for strips (no sprite sheet here) */
.reel-strip {
    width: 100%;
    height: 100%; /* match viewport height by default */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Remove special mapping for 2nd child (was for old sprite technique) */
.reel-strip:nth-child(2) {
    background-position: center center;
}

/* Reel 1: 8 frames (2 rotations) with 4-frame pattern */
.reel-1 .reel-track { height: 800%; }
.reel-1 .reel-track > .reel-strip { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 12.5%;
    background-size: contain; 
    background-position: center center; 
    background-repeat: no-repeat;
    backface-visibility: hidden;
    transform: translateZ(0);
}
/* Position & map by child index (div) to avoid :nth-of-type pitfalls */
.reel-1 .reel-track > .reel-strip:nth-child(1) { top: 0%;    background-image: url('assets/ketchup-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(2) { top: 12.5%; background-image: url('assets/mayo-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(3) { top: 25%;  background-image: url('assets/mustard-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(4) { top: 37.5%; background-image: url('assets/not-found-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(5) { top: 50%;  background-image: url('assets/ketchup-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(6) { top: 62.5%; background-image: url('assets/mayo-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(7) { top: 75%;  background-image: url('assets/mustard-frame.png'); }
.reel-1 .reel-track > .reel-strip:nth-child(8) { top: 87.5%; background-image: url('assets/not-found-frame.png'); }

/* Reel 2: 8-frame track */
.reel-2 .reel-track { height: 800%; }
.reel-2 .reel-track > .reel-strip {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(12.5% + 1px);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.reel-2 .reel-track > .reel-strip:nth-child(1) { top: 0%;    background-image: url('assets/ketchup-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(2) { top: 12.5%; background-image: url('assets/mayo-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(3) { top: 25%;  background-image: url('assets/mustard-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(4) { top: 37.5%; background-image: url('assets/not-found-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(5) { top: 50%;  background-image: url('assets/ketchup-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(6) { top: 62.5%; background-image: url('assets/mayo-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(7) { top: 75%;  background-image: url('assets/mustard-frame.png'); }
.reel-2 .reel-track > .reel-strip:nth-child(8) { top: 87.5%; background-image: url('assets/not-found-frame.png'); }

/* Reel 3: 8-frame track */
.reel-3 .reel-track { height: 800%; }
.reel-3 .reel-track > .reel-strip {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(12.5% + 1px);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.reel-3 .reel-track > .reel-strip:nth-child(1) { top: 0%;    background-image: url('assets/ketchup-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(2) { top: 12.5%; background-image: url('assets/mayo-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(3) { top: 25%;  background-image: url('assets/mustard-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(4) { top: 37.5%; background-image: url('assets/not-found-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(5) { top: 50%;  background-image: url('assets/ketchup-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(6) { top: 62.5%; background-image: url('assets/mayo-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(7) { top: 75%;  background-image: url('assets/mustard-frame.png'); }
.reel-3 .reel-track > .reel-strip:nth-child(8) { top: 87.5%; background-image: url('assets/not-found-frame.png'); }

.spinner-reel.spinning .reel-track {
    animation: spin-reel 1.2s linear infinite;
}

.reel-1.spinning .reel-track { animation: spin-all-frames 0.3s linear infinite; }
.reel-2.spinning .reel-track { animation-duration: 1.25s; }
.reel-3.spinning .reel-track { animation-duration: 1.5s; }

/* Option A: move the two-strip track vertically for seamless loop */
@keyframes spin-reel {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -300%, 0); } /* cycle through 4 frames: 0% -> 100% -> 200% -> 300% */
}

@keyframes spin-all-frames {
    0%   { transform: translate3d(0,    0, 0); }
    25%  { transform: translate3d(0, -200%, 0); }
    50%  { transform: translate3d(0, -400%, 0); }
    75%  { transform: translate3d(0, -600%, 0); }
    100% { transform: translate3d(0, -800%, 0); }
}

/* Pixel-precise spinner using JS-provided --vh variable */
@keyframes spin-px {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, calc(var(--vh) * -8), 0); }
}

@keyframes spin-to-final {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, var(--spin-distance, -87.5%), 0); } /* dynamic: 50%, 62.5%, 75%, 87.5% */
}

.frame {
    position: absolute;
    top: 54.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 40%;
    background-image: url('assets/frame.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 30;
    display: block;
}

.logo {
    position: absolute;
    top: 11.6%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 30%;
    background-image: url('assets/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 33;
}

.enter-food {
    position: absolute;
    top: 70.7%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 15%;
    background-image: url('assets/enter-food.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    border: none;
    outline: none;
    background-color: transparent;
    color: #f1c40f;
    font-size: 32px;
    font-weight: normal;
    text-align: center;
    padding: 0;
    font-family: 'Bangers', 'Arial Black', 'Impact', cursive, sans-serif;
    pointer-events: auto;
    cursor: text;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.enter-food::placeholder {
    color: #7f8c8d;
    opacity: 0.9;
    font-weight: bold;
}

.enter-food:focus {
    outline: none;
    border: none;
}

.enter-food:focus::placeholder {
    opacity: 0;
}

.spin-button {
    position: absolute;
    top: 84.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 54px;
    background-image: url('assets/green.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
    border: none;
    outline: none;
    background-color: transparent;
    color: #0f4d0f;
    font-family: 'Bangers', 'Arial Black', 'Impact', cursive, sans-serif;
    font-size: 32px; /* mobile default, overridden by media queries */
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

.spin-button:active {
    transform: translateX(-50%) translateY(5px) scale(0.95);
}

.spin-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Placeholder classes retained for future UI; no visual output now */
.hidden { display: none !important; }


/* Inline fallback art so spinner works even if assets folder is missing */
.frame-1, .frame-1-dup {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23eaeaea'/></linearGradient></defs><rect width='300' height='600' fill='url(%23g)'/><text x='50%' y='55%' text-anchor='middle' font-family='Segoe UI, Arial' font-size='64' fill='%23e74c3c' font-weight='700'>KETCHUP</text></svg>");
}
.frame-2, .frame-2-dup {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23eaeaea'/></linearGradient></defs><rect width='300' height='600' fill='url(%23g)'/><text x='50%' y='55%' text-anchor='middle' font-family='Segoe UI, Arial' font-size='64' fill='%23f1c40f' font-weight='700'>MAYO</text></svg>");
}
.frame-3, .frame-3-dup {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23eaeaea'/></linearGradient></defs><rect width='300' height='600' fill='url(%23g)'/><text x='50%' y='55%' text-anchor='middle' font-family='Segoe UI, Arial' font-size='64' fill='%23f39c12' font-weight='700'>MUSTARD</text></svg>");
}
.frame-4, .frame-4-dup {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23eaeaea'/></linearGradient></defs><rect width='300' height='600' fill='url(%23g)'/><text x='50%' y='55%' text-anchor='middle' font-family='Segoe UI, Arial' font-size='48' fill='%23888' font-weight='700'>NOT FOUND</text></svg>");
}

/* Voting mode - scales down slot machine and repositions elements */
.slot-machine-container.voting-mode {
    transform: translate(-50%, -50%) scale(0.75);
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Vote UI - shown after reels land */
.vote-container {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 15;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease 0.4s;
}

.voting-mode .vote-container {
    opacity: 1;
}

.vote-label {
    font-family: 'Bangers', 'Arial Black', 'Impact', cursive, sans-serif;
    font-size: 32px;
    color: #f1c40f;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    width: 100%;
    text-align: center;
}

.voting-mode .vote-label {
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 5px;
    opacity: 0.9;
}

.vote-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.vote-alternates {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: auto;
}

/* Desktop: Keep alternates centered below "I AGREE" */
@media (min-width: 768px) {
    .voting-mode .vote-alternates {
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }
}

.vote-btn {
    width: 30%;
    min-width: 120px;
    height: 54px;
    border: none;
    outline: none;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: brightness(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vote-btn-label {
    font-family: 'Bangers', 'Arial Black', 'Impact', cursive, sans-serif;
    font-size: 32px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    text-shadow: none;
    pointer-events: none;
    white-space: nowrap;
}

.vote-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.vote-btn:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

.vote-btn-ketchup {
    background-image: url('assets/red.png');
}

.vote-btn-ketchup .vote-btn-label {
    color: #8B0000;
}

.vote-btn-mayo {
    background-image: url('assets/white.png');
}

.vote-btn-mayo .vote-btn-label {
    color: #8B7355;
}

.vote-btn-mustard {
    background-image: url('assets/yellow.png');
}

.vote-btn-mustard .vote-btn-label {
    color: #7a5c00;
}

.vote-btn-agree {
    background-image: url('assets/green.png');
    width: 42%;
    margin-bottom: 10px;
}

.vote-btn-agree .vote-btn-label {
    color: #0f4d0f;
    font-size: 32px;
}


/* Responsive vote button sizing */
@media (min-width: 768px) {
    .vote-label {
        font-size: 46px;
        margin-bottom: 20px;
    }

    .vote-btn-label {
        font-size: 46px;
    }

    .vote-buttons {
        gap: 20px;
    }

    .vote-alternates {
        gap: 30px;
    }

    .vote-container {
        bottom: 7%;
    }
}

@media (min-width: 1024px) {
    .vote-label {
        font-size: 54px;
        margin-bottom: 25px;
    }

    .vote-btn-label {
        font-size: 54px;
    }

    .vote-buttons {
        gap: 25px;
    }

    .vote-alternates {
        gap: 40px;
    }
}

/* Start Over button - positioned above the slot machine */
.start-over-button {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 54px;
    background-image: url('assets/green.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 35;
    border: none;
    outline: none;
    background-color: transparent;
    color: #0f4d0f;
    font-family: 'Bangers', 'Arial Black', 'Impact', cursive, sans-serif;
    font-size: 32px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.start-over-button:hover {
    filter: brightness(1.1);
}

.start-over-button:active {
    transform: translateX(-50%) translateY(5px) scale(0.95);
}

.voting-mode .start-over-button {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 50px;
    z-index: 50;
}

/* Additional responsive font sizing - placed after base styles to ensure proper cascade */
/* TABLET: Increased by 20% */
@media (min-width: 768px) {
    .enter-food {
        font-size: 46px !important;
    }

    .spin-button {
        font-size: 46px !important;
    }

    .start-over-button {
        font-size: 46px !important;
        width: 35% !important;
    }

    .vote-label {
        font-size: 46px !important;
    }

    .vote-btn-label {
        font-size: 46px !important;
    }
}

/* DESKTOP: All fonts = 54px */
@media (min-width: 1024px) {
    .enter-food {
        font-size: 54px !important;
    }

    .spin-button {
        font-size: 54px !important;
        height: 80px !important;
    }

    .start-over-button {
        font-size: 54px !important;
        height: 80px !important;
        width: 42% !important;
    }

    .vote-label {
        font-size: 54px !important;
    }

    .vote-btn-label {
        font-size: 54px !important;
    }

    .vote-btn {
        height: 80px !important;
    }

    .vote-btn-agree {
        width: 42% !important;
    }

    .vote-container {
        bottom: 8% !important;
    }
}

/* Footer Styles */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    text-align: center;
    z-index: 10000;
    min-height: 50px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-copyright {
    color: #bdc3c7;
    font-size: 14px;
    margin: 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-links a {
    color: #3498db;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 5px;
    }

    .footer-separator {
        display: none;
    }
}

/* Cookie Consent Banner - Simplified */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000;
    border-top: 1px solid #333;
    padding: 12px 20px;
    z-index: 10001; /* Higher than footer (10000) to appear on top */
}

.cookie-banner-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cookie-banner-header h3 {
    display: none;
}

.cookie-banner-body p {
    color: #ffffff;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4;
}

.cookie-banner-learn-more {
    font-size: 12px;
    margin-top: 5px;
}

.cookie-banner-learn-more a {
    color: #ffffff;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.cookie-btn {
    padding: 8px 20px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.cookie-btn:hover {
    background: #333;
}

.cookie-btn-primary {
    background: #ffffff;
    color: #000000;
}

.cookie-btn-primary:hover {
    background: #ddd;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 10px 15px;
    }

    .cookie-banner-body p {
        font-size: 13px;
    }

    .cookie-btn {
        padding: 6px 15px;
        font-size: 13px;
    }
}


/* Snackbar Notification */
.snackbar {
    position: fixed;
    bottom: 100px; /* Above footer and bottom ads */
    left: 50%;
    transform: translateX(-50%) translateY(200%);
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 300px;
    max-width: 90vw;
    z-index: 100000; /* Above everything including ads */
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                visibility 0.3s;
}

.snackbar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.snackbar-message {
    flex: 1;
    line-height: 1.4;
}

.snackbar-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.snackbar-close:hover {
    opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .snackbar {
        bottom: 80px; /* Extra clearance for mobile bottom anchor ads */
        min-width: 0;
        max-width: calc(100vw - 40px);
        font-size: 14px;
        padding: 14px 20px;
    }
}

/* Hero Tagline */
.hero-tagline {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    text-align: center;
    width: 90%;
    max-width: 800px;
    pointer-events: none;
}

.hero-tagline h1 {
    font-family: 'Bangers', cursive;
    font-size: 32px;
    color: #f4d03f;
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 15px rgba(244, 208, 63, 0.4);
    margin: 0;
    letter-spacing: 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-tagline {
        top: 40px;
        width: 85%;
    }

    .hero-tagline h1 {
        font-size: 24px;
        text-shadow:
            2px 2px 0 #000,
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000,
            0 0 10px rgba(244, 208, 63, 0.3);
    }

    .footer-links {
        flex-wrap: wrap;
        font-size: 13px;
        line-height: 1.8;
    }

    .footer-links a {
        font-size: 13px;
    }
}