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

html, body {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Background handled by Three.js scene.background */
    background-color: #2a2a2a; /* Fallback while texture loads */

    /* Mobile optimizations */
    overscroll-behavior: none; /* Prevent pull-to-refresh */
    touch-action: manipulation; /* Prevent zoom on double-tap */
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Prevent iOS callout */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
}

/* Fallback for older browsers that don't support dvh */
@supports not (height: 100dvh) {
    html, body {
        height: 100vh;
    }
}

#webgl-canvas {
    display: block;
    width: 100%;
    height: 100dvh;
}

/* Fallback for older browsers */
@supports not (height: 100dvh) {
    #webgl-canvas {
        height: 100vh;
    }
}

/* Post-it Calendar Button */
.post-it-button {
    --post-it-left: 34.9%;
    --post-it-top: 65.6%;
    --post-it-rotation: 6deg;
    --post-it-scale: 1.34;

    position: fixed;
    left: var(--post-it-left);
    top: var(--post-it-top);
    transform: translate(-50%, -50%) rotate(var(--post-it-rotation)) scale(var(--post-it-scale));
    width: 180px;
    min-width: 120px; /* Ensure minimum size for mobile */
    height: auto;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.2s ease, filter 0.2s ease;
    z-index: 100;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

    /* Ensure tappable on mobile (44x44px minimum) */
    padding: 8px;
}

.post-it-button.visible {
    opacity: 1;
    pointer-events: auto;
}

.post-it-button:hover {
    transform: translate(-50%, -50%) rotate(var(--post-it-rotation)) scale(calc(var(--post-it-scale) * 1.05));
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.post-it-button:active {
    transform: translate(-50%, -50%) rotate(var(--post-it-rotation)) scale(calc(var(--post-it-scale) * 0.98));
}

/* RSVP Instruction Text */
.rsvp-instruction {
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 100;
    text-align: center;
}

.rsvp-instruction.visible {
    opacity: 1;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .rsvp-instruction {
        font-size: 16px;
        bottom: 10%;
    }

    .post-it-button {
        width: 140px;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .rsvp-instruction {
        font-size: 14px;
        bottom: 8%;
    }

    .post-it-button {
        width: 120px;
    }
}