html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom, #87CEEB 0%, #B0E2FF 100%);
    overflow: hidden;
    padding-top: 50px;
}

.sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.cloud {
    position: absolute;
    width: 200px;
    height: 60px;
    background: #fff;
    border-radius: 200px;
    opacity: 0.8;
    filter: blur(10px);
    animation: float 20s infinite linear;
}

.cloud.small {
    transform: scale(0.6);
    opacity: 0.6;
}

.cloud.large {
    transform: scale(1.4);
    opacity: 0.9;
}

.cloud.flipped {
    transform: scaleX(-1);
}

.cloud.flipped.small {
    transform: scale(0.6) scaleX(-1);
}

.cloud.flipped.large {
    transform: scale(1.4) scaleX(-1);
}

.sun {
    position: fixed;
    top: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #ffeb3b 0%, #fbc02d 100%);
    border-radius: 50%;
    box-shadow: 0 0 100px #ffeb3b, 0 0 200px #ff9800;
    z-index: -1;
    filter: blur(2px);
}

.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
}

.ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 200px;
    background: linear-gradient(to bottom, rgba(255, 235, 59, 0.8), transparent);
    transform-origin: top center;
}

/* Generate 8 rays */
.ray:nth-child(1) { transform: rotate(200deg) translateY(50px); }
.ray:nth-child(2) { transform: rotate(220deg) translateY(50px); }
.ray:nth-child(3) { transform: rotate(240deg) translateY(50px); }
.ray:nth-child(4) { transform: rotate(260deg) translateY(50px); }
.ray:nth-child(5) { transform: rotate(280deg) translateY(50px); }
.ray:nth-child(6) { transform: rotate(300deg) translateY(50px); }
.ray:nth-child(7) { transform: rotate(320deg) translateY(50px); }
.ray:nth-child(8) { transform: rotate(340deg) translateY(50px); }

@keyframes float {
    from { translate: -100px 0; }
    to { translate: 100px 0; }
}

.cloud::after, .cloud::before {
    content: '';
    position: absolute;
    background: #fff;
    width: 100px;
    height: 80px;
    position: absolute;
    top: -40px;
    left: 20px;
    border-radius: 100px;
}

.cloud::after {
    width: 120px;
    height: 120px;
    top: -70px;
    left: 70px;
}

.ground {
    position: fixed;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 400px;
    background: linear-gradient(to bottom, rgb(85, 207, 81), #1b5e20);
    border-radius: 50% 50% 0 0;
    z-index: -1;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
}

.grass-container {
    position: fixed;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 400px;
    z-index: 0;
    pointer-events: none;
}

.grass-blade {
    position: absolute;
    width: 6px;
    height: 40px;
    background: rgb(85, 207, 81);
    border-radius: 3px 3px 0 0;
    transform-origin: bottom center;
    animation: sway 3s infinite ease-in-out;
}

@keyframes sway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 14vw, 220px), 1fr));
    gap: clamp(16px, 1.4vw, 26px);
    padding: clamp(20px, 1.8vw, 36px);
    --tree-safe: 0px;
    width: min(94%, 1300px);
    max-width: calc(100% - var(--tree-safe));
    margin-inline: auto;
    justify-content: center;
    z-index: 2;
    margin-bottom: clamp(200px, 22vh, 360px); /* Space for the ground + fixed art */
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

.day-button {
    position: relative;
    padding: clamp(24px, 2.2vw, 42px) clamp(14px, 1.6vw, 28px);
    font-size: clamp(1rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: bold;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 2px solid #fff;
    border-radius: clamp(16px, 1.4vw, 26px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.day-label {
    position: relative;
    z-index: 2;
}

.button-image {
    position: absolute;
    top: clamp(-55px, -3.6vw, -40px);
    left: clamp(-55px, -3.6vw, -40px);
    transform: rotate(-15deg);
    width: clamp(56px, 4.2vw, 90px);
    height: auto;
    pointer-events: none;
    z-index: 2;
    border-radius: 10px;
}

.button-image-center {
    position: absolute;
    top: clamp(-70px, -4vw, -48px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(56px, 4.2vw, 90px);
    height: auto;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.3s ease;
}

.button-image-center.sunflower {
    top: clamp(-34px, -2vw, -26px);
    left: 38%;
    width: clamp(48px, 3.4vw, 78px);
}

.peashooter {
    position: absolute;
    top: clamp(-38px, -2.2vw, -28px);
    left: 60%;
    width: clamp(48px, 3.4vw, 82px);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.day-button:hover .button-image-center.sunflower {
    animation: none;
    transform: translateX(-50%);
}

.sun-burst {
    position: absolute;
    top: clamp(-52px, -3vw, -38px);
    left: 36%;
    width: 90px;
    height: 70px;
    pointer-events: none;
    z-index: 3;
}

.sun-spark {
    position: absolute;
    width: clamp(20px, 1.6vw, 32px);
    height: auto;
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
}

.sun-spark:nth-child(1) { left: 0; top: 20px; }
.sun-spark:nth-child(2) { left: 24px; top: 0; }
.sun-spark:nth-child(3) { left: 42px; top: 22px; }
.sun-spark:nth-child(4) { left: 14px; top: 36px; }

.day-button:hover .sun-spark {
    animation: sun-pop 1.2s ease-in-out infinite;
}

@keyframes sun-pop {
    0% { opacity: 0; transform: translate(0, 10px) scale(0.6); }
    20% { opacity: 1; }
    60% { opacity: 1; transform: translate(0, -10px) scale(1); }
    100% { opacity: 0; transform: translate(0, -20px) scale(1.1); }
}

.peas-container {
    position: absolute;
    top: clamp(-42px, -2.4vw, -30px);
    left: 84%;
    width: 120px;
    height: 48px;
    pointer-events: none;
    z-index: 3;
}

.pea {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    background: #6fbf4b;
    border-radius: 50%;
    opacity: 0;
}

.day-button:hover .pea {
    animation: pea-shoot 0.8s infinite linear;
}

@keyframes pea-shoot {
    0% { transform: translate(0, -50%) scale(0.7); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(120px, -50%) scale(1); opacity: 0; }
}

.fade-swap {
    position: absolute;
    top: clamp(-42px, -2.6vw, -30px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(48px, 3.4vw, 82px);
    height: clamp(48px, 3.4vw, 82px);
    object-fit: cover;
    pointer-events: none;
    border-radius: 10px;
    transition: opacity 0.35s ease;
    z-index: 2;
}

.fade-swap.after {
    opacity: 0;
}

.day-button:hover .fade-swap.before {
    opacity: 0;
}

.day-button:hover .fade-swap.after {
    opacity: 1;
}

.day16-image {
    position: absolute;
    top: clamp(-42px, -2.6vw, -30px);
    width: clamp(44px, 3.2vw, 72px);
    height: auto;
    pointer-events: none;
    border-radius: 10px;
    z-index: 2;
}

.day16-left {
    left: clamp(-30px, -2vw, -18px);
}

.day16-right {
    right: clamp(-30px, -2vw, -18px);
}

.day16-hover {
    position: absolute;
    top: clamp(18px, 1.6vw, 28px);
    width: clamp(34px, 2.4vw, 56px);
    height: auto;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
}

.day16-raspberry {
    left: clamp(-22px, -1.6vw, -12px);
}

.day16-melon {
    right: clamp(-22px, -1.6vw, -12px);
}

.day-button:hover .day16-hover {
    opacity: 1;
    transform: translateY(0);
    animation: fruit-swing 1.2s ease-in-out infinite;
}

@keyframes fruit-swing {
    0% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(2px) rotate(6deg); }
    100% { transform: translateY(0) rotate(-6deg); }
}

.day17-vinyl {
    position: absolute;
    top: clamp(-36px, -2.2vw, -24px);
    left: 50%;
    width: clamp(44px, 3.2vw, 70px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 36%, rgba(0, 0, 0, 0.75) 36% 36.5%, rgba(0, 0, 0, 0) 36.5% 39%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px),
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 5px),
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0) 45%),
        #111;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.35);
    animation: vinyl-spin 6s linear infinite;
    z-index: 2;
    pointer-events: none;
}

.day17-vinyl::before {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.18), rgba(123, 31, 42, 0.95) 55%, rgba(44, 8, 14, 0.95) 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
}

.day17-vinyl::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(1rem, 0.6rem + 1vw, 1.6rem);
    font-weight: 600;
    color: #f8f1e7;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

@keyframes vinyl-spin {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

.snow-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
}

.snowflake {
    position: absolute;
    top: -30px;
    width: clamp(18px, 1.4vw, 26px);
    height: auto;
    opacity: 0;
    animation: snow-fall linear infinite;
}

@keyframes snow-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(140px) rotate(180deg); opacity: 0; }
}

.day19-cat {
    position: absolute;
    top: clamp(2px, 0.4vw, 10px);
    left: -12px;
    transform: none;
    width: clamp(30px, 2.2vw, 56px);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.day19-cup {
    position: absolute;
    top: clamp(2px, 0.2vw, 12px);
    left: -14px;
    width: clamp(44px, 3.2vw, 78px);
    height: clamp(62px, 4.4vw, 102px);
    transform: none;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 0 0 24px 24px;
    clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
    box-shadow: none;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.35s ease;
}

.day-button:hover .day19-cup {
    transform: translateY(-96px);
}

.day21-video {
    position: absolute;
    top: clamp(-18px, -1.2vw, -8px);
    right: -10px;
    width: clamp(38px, 2.8vw, 70px);
    max-height: clamp(66px, 4.8vw, 110px);
    height: auto;
    transform: none;
    border-radius: 10px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.day22-cat,
.day22-explosion {
    position: absolute;
    top: clamp(-26px, -1.8vw, -14px);
    right: -8px;
    width: clamp(42px, 3vw, 72px);
    height: auto;
    pointer-events: none;
}

.day22-cat {
    z-index: 2;
    transition: opacity 0.2s ease;
}

.day22-explosion {
    z-index: 3;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.day-button:hover .day22-cat {
    opacity: 0;
}

.day-button:hover .day22-explosion {
    opacity: 1;
    transform: scale(1);
}

.day23-spongebob {
    position: absolute;
    bottom: clamp(-2px, 0.2vw, 6px);
    left: -10px;
    width: clamp(36px, 2.6vw, 72px);
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.day23-jellyfish {
    position: absolute;
    bottom: clamp(0px, 0.4vw, 8px);
    left: 52px;
    width: clamp(24px, 1.8vw, 48px);
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.day-button:hover .day23-spongebob {
    animation: spongebob-chase 6s linear infinite;
}

.day-button:hover .day23-jellyfish {
    animation: jellyfish-flee 4.5s linear infinite;
}

@keyframes spongebob-chase {
    0% { transform: translateX(0); }
    100% { transform: translateX(140px); }
}

@keyframes jellyfish-flee {
    0% { transform: translate(0, 0); }
    25% { transform: translate(28px, -8px); }
    50% { transform: translate(56px, 0); }
    75% { transform: translate(84px, -8px); }
    100% { transform: translate(112px, 0); }
}

.day24-tube {
    position: absolute;
    bottom: clamp(-14px, -1vw, -4px);
    left: -8px;
    width: clamp(40px, 2.8vw, 76px);
    height: auto;
    transform: translateX(0);
    transform-origin: top center;
    pointer-events: none;
    z-index: 0;
}

.day-button:hover .day24-tube {
    animation: tube-slide 1.6s ease-in-out infinite;
}

@keyframes tube-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(160px); }
}

.day25-heart-behind {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(26px, 2.2vw, 48px);
    height: clamp(26px, 2.2vw, 48px);
    transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
    background: #ff7aa6;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.day25-heart-behind::before,
.day25-heart-behind::after {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    background: #ff7aa6;
    border-radius: 50%;
}

.day25-heart-behind::before {
    top: -45%;
    left: 5%;
}

.day25-heart-behind::after {
    left: -45%;
    top: 5%;
}

.day-button:hover .day25-heart-behind {
    opacity: 1;
    animation: day25-pulse 1.4s ease-in-out infinite;
}

@keyframes day25-pulse {
    0% { transform: translate(-50%, -50%) rotate(45deg) scale(0.9); }
    50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); }
    100% { transform: translate(-50%, -50%) rotate(45deg) scale(0.95); }
}

.day25-side-balloon {
    position: absolute;
    top: 50%;
    width: clamp(18px, 1.4vw, 26px);
    height: clamp(24px, 1.8vw, 32px);
    border-radius: 50% 50% 45% 45%;
    background: rgba(255, 160, 190, 0.9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 1;
    animation: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.day25-side-balloon::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.55);
    transform: translateX(-50%);
}

.day25-side-balloon.left {
    left: -24px;
    animation-delay: 0.2s;
    background: rgba(240, 90, 90, 0.9);
}

.day25-side-balloon.right {
    right: -24px;
    animation-delay: 0.6s;
    background: rgba(120, 170, 255, 0.9);
}

.day-button:hover .day25-side-balloon {
    opacity: 1;
    animation: day25-float 4.5s ease-in-out infinite;
}

@keyframes day25-float {
    0% { transform: translateY(calc(-50% + 8px)); }
    50% { transform: translateY(calc(-50% - 10px)); }
    100% { transform: translateY(calc(-50% + 8px)); }
}

.day20-car {
    position: absolute;
    bottom: clamp(-10px, -0.6vw, 2px);
    left: -25%;
    width: clamp(70px, 5vw, 120px);
    height: auto;
    pointer-events: none;
    z-index: 3;
}

.day20-jane {
    position: absolute;
    bottom: clamp(-8px, -0.5vw, 4px);
    right: -8px;
    width: clamp(44px, 3vw, 72px);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.day-button:hover .day20-car {
    animation: day20-drive 2.2s linear infinite;
}

.day-button:hover .day20-jane {
    animation: day20-hit 2.2s linear infinite;
}

@keyframes day20-drive {
    0% { transform: translateX(0); }
    60% { transform: translateX(110%); }
    100% { transform: translateX(140%); }
}

@keyframes day20-hit {
    0%, 55% { transform: translateX(0) scale(1); opacity: 1; }
    65% { transform: translateX(18px) scale(0.9); opacity: 0.6; }
    100% { transform: translateX(18px) scale(0.9); opacity: 0.6; }
}

.button-image-center.xavier {
    top: -20px;
    border-radius: 10px;
}

.day-button:hover .button-image-center:not(.xavier):not(.sunflower) {
    animation: jump 0.5s ease-in-out forwards;
}

@keyframes jump {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-30px); }
    100% { transform: translateX(-50%) translateY(0); }
}

.button-image-right {
    position: absolute;
    top: clamp(-55px, -3.6vw, -40px);
    right: clamp(-55px, -3.6vw, -40px);
    transform: rotate(15deg);
    width: clamp(56px, 4.2vw, 90px);
    height: auto;
    pointer-events: none;
    z-index: 2;
    border-radius: 10px;
}

.day-button:hover .button-image-right.matrix-glitch {
    animation: matrix-glitch 0.8s steps(1) forwards;
}

@keyframes matrix-glitch {
    0% { clip-path: inset(0 0 0 0); transform: rotate(15deg) translate(0); }
    5% { clip-path: inset(10% 0 80% 0); transform: rotate(15deg) translate(-10px, 5px); filter: hue-rotate(90deg) blur(1px); }
    10% { clip-path: inset(30% 0 40% 0); transform: rotate(15deg) translate(10px, -5px); filter: contrast(3) invert(1); }
    15% { clip-path: inset(60% 0 10% 0); transform: rotate(15deg) translate(-5px, 10px); filter: hue-rotate(180deg); }
    20% { clip-path: inset(0 0 0 0); transform: rotate(15deg) translate(0); filter: none; }
    25% { clip-path: inset(20% 0 50% 0); transform: rotate(15deg) translate(8px, 8px); filter: brightness(2); }
    30% { clip-path: inset(80% 0 5% 0); transform: rotate(15deg) translate(-8px, -8px); filter: saturate(5); }
    35% { clip-path: inset(40% 0 40% 0); transform: rotate(15deg) translate(15px, 0); filter: hue-rotate(270deg); }
    40% { clip-path: inset(0 0 0 0); transform: rotate(15deg) translate(0); }
    45% { clip-path: inset(10% 0 10% 0); transform: rotate(15deg) scale(1.2); filter: invert(0.8); }
    50% { clip-path: inset(0 0 0 0); transform: rotate(15deg) scale(1); }
    100% { clip-path: inset(0 0 0 0); transform: rotate(15deg) translate(0); }
}

.zzz-container {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.zzz {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0;
    color: #007bff;
    font-weight: bold;
}

.day-button:hover .zzz:nth-child(1) { animation: zzz-float 2s infinite 0s; }
.day-button:hover .zzz:nth-child(2) { animation: zzz-float 2s infinite 0.3s; }
.day-button:hover .zzz:nth-child(3) { animation: zzz-float 2s infinite 0.6s; }
.day-button:hover .zzz:nth-child(4) { animation: zzz-float 2s infinite 0.9s; }
.day-button:hover .zzz:nth-child(5) { animation: zzz-float 2s infinite 1.2s; }
.day-button:hover .zzz:nth-child(6) { animation: zzz-float 2s infinite 1.5s; }

.button-image.bladee {
    width: clamp(44px, 3.2vw, 70px);
    top: clamp(-44px, -2.8vw, -30px);
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
}

.day-button:hover .button-image.bladee {
    animation: bladee-bob 1.5s infinite ease-in-out;
}

@keyframes bladee-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    25% { transform: translateX(-50%) translateY(-6px); }
    75% { transform: translateX(-50%) translateY(4px); }
}

.paws-container {
    position: absolute;
    top: -40px;
    left: -30px;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 3;
}

.paw {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0;
    pointer-events: none;
}

.day-button:hover .paw:nth-child(1) { animation: paw-float 2s infinite 0s; }
.day-button:hover .paw:nth-child(2) { animation: paw-float 2s infinite 0.25s; }
.day-button:hover .paw:nth-child(3) { animation: paw-float 2s infinite 0.5s; }
.day-button:hover .paw:nth-child(4) { animation: paw-float 2s infinite 0.75s; }
.day-button:hover .paw:nth-child(5) { animation: paw-float 2s infinite 1s; }
.day-button:hover .paw:nth-child(6) { animation: paw-float 2s infinite 1.25s; }
.day-button:hover .paw:nth-child(7) { animation: paw-float 2s infinite 1.5s; }
.day-button:hover .paw:nth-child(8) { animation: paw-float 2s infinite 1.75s; }

@keyframes paw-float {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-30px, -60px) rotate(-20deg) scale(1.2); opacity: 0; }
}

@keyframes zzz-float {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(20px, -40px) scale(1.2); opacity: 0; }
}

.nummies {
    width: clamp(48px, 3.6vw, 78px) !important;
    top: clamp(-45px, -2.8vw, -30px) !important;
    left: clamp(-45px, -2.8vw, -30px) !important;
}

.milk-carton {
    position: absolute;
    top: -25px;
    right: -25px;
    width: clamp(70px, 4.8vw, 110px);
    height: auto;
    opacity: 0;
    transform: rotate(15deg) translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.day-button:hover .milk-carton {
    opacity: 1;
    transform: rotate(0deg) translateY(0);
    animation: milk-shake 1.5s infinite ease-in-out;
}

@keyframes milk-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.button-image-right.rommula {
    top: clamp(-65px, -3.8vw, -48px);
    right: clamp(-45px, -2.6vw, -30px);
    width: clamp(54px, 3.8vw, 86px);
    border-radius: 10px;
    border: 2px solid #ff4500;
    transition: filter 0.3s ease;
}

.day-button:hover .button-image-right.rommula {
    animation: none;
    filter: drop-shadow(0 0 15px #ff4500) drop-shadow(0 0 30px #ff8c00);
}

.fire-container {
    position: absolute;
    top: -20px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 40px);
    pointer-events: none;
    z-index: 3;
}

.flame {
    position: absolute;
    background: #ff4500;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    opacity: 0;
    filter: blur(1.5px);
    box-shadow: 0 0 10px #ff4500;
    will-change: transform, opacity;
    pointer-events: none;
}

.day-button:hover .flame {
    animation: rise-around 0.5s infinite ease-in;
}

@keyframes rise-around {
    0% { transform: translate3d(0,0,0) rotate(-45deg) scale(1); opacity: 0.9; background: #ff4500; }
    30% { background: #ff8c00; opacity: 0.8; }
    60% { background: #ffd700; opacity: 0.6; }
    100% { transform: translate3d(0,-80px,0) rotate(-45deg) scale(0); opacity: 0; background: #ffffff; }
}

.button-image-right.mrnada {
    top: clamp(-52px, -3vw, -38px);
    right: clamp(-38px, -2.2vw, -24px);
    width: clamp(50px, 3.4vw, 78px);
    border-radius: 12px;
    border: 2px solid #333;
    z-index: 4;
}

.calling-container {
    position: absolute;
    top: -60px;
    right: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.day-button:hover .calling-container {
    opacity: 1;
}

.calling-text {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.call-actions {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.day-button:hover .call-actions {
    opacity: 1;
}

.call-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.call-icon {
    filter: brightness(0) invert(1);
    display: inline-block;
}

.call-btn.decline {
    background-color: #ff3b30;
}

.call-btn.accept {
    background-color: #4cd964;
}

.phone-icon {
    font-size: 1.5rem;
    animation: phone-vibrate 0.5s infinite;
}

.camera-emoji {
    position: absolute;
    top: -24px;
    right: -18px;
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

.day-button:hover .camera-emoji {
    animation: camera-flash 0.7s ease-in-out infinite;
}

@keyframes camera-flash {
    0%, 70%, 100% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15)); opacity: 1; }
    75% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.95)); opacity: 0.3; }
    80% { filter: drop-shadow(0 0 34px rgba(255, 255, 255, 1)); opacity: 1; }
}

.bunny-hop {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(42px, 3.2vw, 72px);
    height: auto;
    pointer-events: none;
    z-index: 3;
    transform: translate(-50%, -40%);
}

.day-button:hover .bunny-hop {
    animation: bunny-hop 1.6s infinite ease-in-out;
}

@keyframes bunny-hop {
    0% { transform: translate(-50%, -40%); }
    20% { transform: translate(-50%, -70%); }
    35% { transform: translate(-50%, -40%); }
    55% { transform: translate(-42%, -40%); }
    70% { transform: translate(-42%, -72%); }
    85% { transform: translate(-42%, -40%); }
    100% { transform: translate(-50%, -40%); }
}

.button-image-right.waterbottle {
    top: clamp(-52px, -3.2vw, -38px);
    right: clamp(-42px, -2.4vw, -28px);
    width: clamp(52px, 3.6vw, 86px);
    border-radius: 10px;
}

.water-droplets {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.water-drop {
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    background: #4fc3f7;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    opacity: 0;
}

.day-button:hover .water-drop {
    animation: water-splash 1.2s infinite ease-out;
}

@keyframes water-splash {
    0% { transform: translate(0, 0) rotate(-45deg) scale(0.4); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(15px, 50px) rotate(-45deg) scale(1); opacity: 0; }
}

.button-image-right.scooby {
    top: clamp(-52px, -3.2vw, -38px);
    right: clamp(-40px, -2.4vw, -26px);
    width: clamp(56px, 4vw, 92px);
    border-radius: 10px;
}

.crumbs-container {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 70px;
    pointer-events: none;
    z-index: 3;
}

.crumb {
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    background: #8b5a2b;
    border-radius: 50%;
    opacity: 0;
}

.day-button:hover .crumb {
    animation: crumb-fall 1.4s infinite ease-in;
}

@keyframes crumb-fall {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(60px) scale(1); opacity: 0; }
}

.button-image-right.mallet {
    width: clamp(50px, 3.6vw, 84px);
    top: clamp(-48px, -3vw, -34px);
    right: clamp(6px, 0.4vw, 14px);
    border-radius: 10px;
    z-index: 4;
}

.day-button:hover .button-image-right.mallet {
    animation: mallet-whack 1.2s infinite steps(1);
}

@keyframes mallet-whack {
    0%, 55% { transform: rotate(0deg) translate(0, 0); }
    60% { transform: rotate(-12deg) translate(-2px, -2px); }
    65% { transform: rotate(8deg) translate(0, 2px); }
    70% { transform: rotate(-10deg) translate(-2px, -2px); }
    75% { transform: rotate(10deg) translate(1px, 2px); }
    100% { transform: rotate(0deg) translate(0, 0); }
}

.day1-bubblegum {
    position: absolute;
    top: clamp(-20px, -1.2vw, -8px);
    right: -12px;
    width: clamp(42px, 3.2vw, 72px);
    height: auto;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 3;
}

.day-button:hover .day1-bubblegum {
    opacity: 1;
    transform: scale(1);
    animation: bubblegum-pop 0.8s ease-in-out infinite;
}

@keyframes bubblegum-pop {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.05); }
    100% { transform: scale(0.95); }
}

.day12-nett {
    position: absolute;
    top: clamp(-48px, -3vw, -34px);
    right: clamp(-44px, -2.6vw, -28px);
    width: clamp(44px, 3.2vw, 78px);
    height: auto;
    pointer-events: none;
    z-index: 3;
}

.day-button:hover .day12-nett {
    animation: nett-hit 1.2s infinite steps(1);
}

@keyframes nett-hit {
    0%, 55% { transform: translateX(0) rotate(0deg); }
    60% { transform: translateX(-6px) rotate(-8deg); }
    65% { transform: translateX(-2px) rotate(4deg); }
    70% { transform: translateX(-8px) rotate(-6deg); }
    75% { transform: translateX(-4px) rotate(6deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

@keyframes phone-vibrate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(10deg); }
}

.day-button:hover .button-image-right.mrnada {
    animation: phone-ring 0.2s infinite;
}

@keyframes phone-ring {
    0% { transform: rotate(15deg) translate(0, 0); }
    25% { transform: rotate(18deg) translate(2px, -2px); }
    50% { transform: rotate(12deg) translate(-2px, 2px); }
    75% { transform: rotate(18deg) translate(2px, 2px); }
    100% { transform: rotate(15deg) translate(0, 0); }
}

.pot-of-gold {
    position: fixed;
    bottom: 160px;
    left: 5%;
    width: 150px;
    height: auto;
    cursor: pointer;
    z-index: 0;

    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

.pot-of-gold:hover {
    transform: scale(1.1);
}

.treehouse {
    position: fixed;
    bottom: 100px;
    right: -50px;
    width: 700px;
    height: auto;
    cursor: pointer;
    z-index: 0;
}

.rainbow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 100%, 
        transparent 40%, 
        rgba(255, 0, 0, 0.4) 45%, 
        rgba(255, 165, 0, 0.4) 50%, 
        rgba(255, 255, 0, 0.4) 55%, 
        rgba(0, 128, 0, 0.4) 60%, 
        rgba(0, 0, 255, 0.4) 65%, 
        rgba(75, 0, 130, 0.4) 70%, 
        rgba(238, 130, 238, 0.4) 75%,
        transparent 80%);
    z-index: -1;
    filter: blur(30px);
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.rainbow.visible {
    opacity: 1;
}

.day-button:hover {
    background-color: #fff;
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
    color: #007bff;
}

.day-button:active {
    transform: translateY(-2px) scale(0.98);
}

@media (max-width: 600px) {
    body {
        overflow-y: auto;
    }

    .container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
        padding: 16px;
        margin-bottom: 160px;
    }

    .day-button {
        padding: 24px 14px;
        font-size: 1rem;
        border-radius: 16px;
    }

    .button-image,
    .button-image-center,
    .button-image-right {
        width: 56px;
        top: -40px;
    }

    .button-image {
        left: -40px;
    }

    .button-image-right {
        right: -40px;
    }
}

@media (min-width: 1400px) {
    .container {
        width: min(92%, 1500px);
    }
}

@media (min-width: 1200px) {
    .container {
        padding-left: clamp(20px, 4vw, 80px);
    }
}

@media (min-width: 900px) {
    .container {
        --tree-safe: clamp(140px, 24vw, 420px);
    }
}