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

.mesa-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 20%, #4a3066 40%, #6b4c7a 60%, #a67c52 80%, #d4a84b 100%);
}

.sky {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, #0d0221 0%, #1a0a2e 15%, #2d1b4e 30%, #4a3066 50%, #7a5a8a 70%, #c4865e 90%, #e8c879 100%);
    z-index: 1;
}

.sun {
    position: absolute;
    bottom: 28%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #ffec8b 0%, #ffb347 40%, #ff8c42 70%, #e5652d 100%);
    border-radius: 50%;
    box-shadow: 0 0 60px 30px rgba(255, 179, 71, 0.6), 0 0 100px 60px rgba(255, 140, 66, 0.4);
    z-index: 2;
}

.mesa {
    position: absolute;
    bottom: 0;
    z-index: 3;
}

.mesa-back {
    left: 10%;
    width: 25%;
    height: 35%;
    background: rgba(26, 10, 46, 0.85);
    clip-path: polygon(20% 100%, 25% 40%, 35% 35%, 45% 40%, 50% 30%, 60% 35%, 70% 30%, 80% 40%, 85% 35%, 90% 45%, 95% 100%);
    z-index: 3;
}

.mesa-mid {
    left: 35%;
    width: 35%;
    height: 30%;
    background: rgba(45, 27, 78, 0.9);
    clip-path: polygon(10% 100%, 15% 45%, 25% 35%, 35% 40%, 45% 30%, 55% 35%, 65% 25%, 75% 35%, 85% 30%, 95% 40%, 100% 100%);
    z-index: 4;
}

.mesa-front {
    left: 60%;
    width: 40%;
    height: 25%;
    background: rgba(74, 48, 102, 0.95);
    clip-path: polygon(5% 100%, 10% 50%, 20% 40%, 30% 45%, 40% 35%, 50% 40%, 60% 30%, 70% 40%, 80% 35%, 90% 45%, 95% 100%);
    z-index: 5;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(180deg, #6b4c7a 0%, #4a3066 50%, #2d1b4e 100%);
    z-index: 6;
}

@media (max-width: 768px) {
    .sun {
        width: 80px;
        height: 80px;
        bottom: 30%;
    }
    
    .mesa-back {
        height: 30%;
        width: 30%;
        left: 5%;
    }
    
    .mesa-mid {
        height: 25%;
        width: 40%;
        left: 30%;
    }
    
    .mesa-front {
        height: 20%;
        width: 50%;
        left: 50%;
    }
}