/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: relative;
    touch-action: none; /* Prevent default touch behaviors for better control */
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-select: none; /* Disable text selection */
    user-select: none;
}

.background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Hand-drawn sketch layer that reveals as card moves */
.background-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/sketch.webp');
    background-size: 140vw;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: -1;
    
    /* Mask to hide sketch where card is positioned */
    mask: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), 
                         transparent var(--card-radius, 350px), 
                         black calc(var(--card-radius, 350px) + 50px));
    -webkit-mask: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), 
                                 transparent var(--card-radius, 350px), 
                                 black calc(var(--card-radius, 350px) + 50px));
}

.playground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Desktop sketch scaling coordinated with card sizes */
@media (min-width: 1200px) {
    .background-wrapper::after {
        background-size: 120vw;
    }
}

@media (min-width: 1600px) {
    .background-wrapper::after {
        background-size: 100vw;
    }
}

/* Mobile sketch sizing - proportional to smaller cards */
@media (max-width: 768px) {
    .background-wrapper::after {
        background-size: 165vw; /* 55vw card × 3 = 165vw sketch */
    }
}

@media (max-width: 480px) {
    .background-wrapper::after {
        background-size: 180vw; /* 60vw card × 3 = 180vw sketch */
    }
}

@media (max-width: 380px) {
    .background-wrapper::after {
        background-size: 165vw; /* 55vw card × 3 = 165vw sketch */
    }
}