* {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    margin: 0;
    background: #fff9f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    text-align: center;
    padding: 20px;
    max-width: 420px;
    width: 100%;
    margin-top: 140px;
    /* Explicit spacing for chicken */
}



.chicken-wrapper {
    margin: 20px 0;
}

.chicken-wrapper img {
    width: 220px;
    max-width: 80vw;
    height: auto;
}

/* Happy animation */
.happy {
    animation: bounce 1.2s infinite ease-in-out;
}

/* Sad animation */
.sad {
    animation: droop 2.5s infinite ease-in-out;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes droop {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(4px) rotate(-1deg);
    }
}

button {
    background: #ffcc00;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

.counter {
    margin-top: 16px;
    font-size: 14px;
    opacity: 0.8;
}

.reset-timer {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}



/* Header Styles */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Or space-between if we want left/right? User said "also in header". Let's put them together on right or split. "hamburger menu... in the header... thats where add to phone home screen should be too". Let's group them. */
    align-items: center;
    padding: 15px 20px;
    z-index: 10;
    gap: 15px;
}

.header-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
}

.menu-btn {
    font-size: 28px;
    line-height: 1;
}

.install-btn {
    border: 2px solid #ffcc00;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.5);
    /* Slight background for readability */
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 350px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close,
.close-biz {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.close:hover,
.close-biz:hover {
    color: #000;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 16px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.6;
    margin: 0;
}

.tab-btn.active {
    opacity: 1;
    color: #eeaa00;
    /* Darker yellow/orange for contrast */
    border-bottom: 2px solid #eeaa00;
}

.tab-content {
    display: none;
    text-align: left;
    background: #fdfdfd;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.tab-content.active {
    display: block;
}

.tab-content p {
    margin: 10px 0;
    line-height: 1.4;
}

.hidden {
    display: none !important;
}

/* Side Menu */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    /* Above modal if needed, or below? Modal is 1000. Let's make menu 1001 so it slides over everything. */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.side-menu.open {
    transform: translateX(0);
}

.menu-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.close-menu {
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
}

.menu-item {
    background: none;
    border: none;
    text-align: left;
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #333;
}

.menu-item:hover {
    color: #eeaa00;
}

.biz-link {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #ffcc00;
}

.biz-link:hover {
    background-color: #fff9f0;
}

/* Hoodie Section */
.hoodie-section {
    margin-top: 30px;
    margin-bottom: 20px;
}

.hoodie-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.hoodie-wrapper img {
    width: 250px;
    /* Adjust size as needed */
    max-width: 90%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hoodie-btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffcc00;
    /* Similar yellow to other buttons */
    color: #333;
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    white-space: nowrap;
}

.hoodie-btn:hover {
    background: #e6b800;
}

/* Sponsor Section */
.sponsor-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.sponsor-section h3 {
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

.video-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.video-container iframe {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}