@font-face {
    font-family: 'Skifer';
    src: url('assets/MV-SKIFER.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

body {
    background-color: #050505;
    font-family: 'Skifer', sans-serif;
    color: white;
    overflow-x: hidden;
}

/* 1 */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.title-wrapper {
    text-align: center;
    max-width: 90%;
}

.main-title {
    font-size: clamp(2rem, 5vw, 6.5rem);
    letter-spacing: 2px;
    text-transform: lowercase;
    line-height: 1.1;
    background: linear-gradient(90deg, #8474EA 0%, #D77984 23%, #C95937 36%, #EC9033 42%, #F6CD66 65%, #97AF6D 80%, #3F74C4 87%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 119, 160, 0.532));
}

/* курсор */
.cursor-star {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 9999;
    fill: #F6CD66;
    filter: drop-shadow(0 0 5px rgba(246, 205, 102, 0.8));
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}

/* 2 */
.stars-section {
    height: 100vh;
    position: relative;
}

.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.subtitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 3vw, 3rem);
    letter-spacing: 4px;
    text-transform: lowercase;
    white-space: nowrap;
    background: linear-gradient(90deg, #C95937 0%, #D77984 28%, #8474EA 51%, #EC9033 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(201, 89, 55, 0.5));
}

button, a, svg, path, .star, .puzzle-star {
    cursor: none !important;
}

.star {
    position: absolute;
    pointer-events: auto;
    transition: all 0.4s ease;
    overflow: visible;
}

.star path {
    fill: transparent;
    transition: all 0.4s ease;
    stroke-width: 2px;
    opacity: 0.3;
}

.star:hover path { opacity: 0.8; }

.star-big { width: 190px; top: 60%; left: 10%; }
.star-big path { stroke: #8A2BE2; }
.star-big.active path { fill: url(#grad-purple); opacity: 1; filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.6)); }

.star-small { width: 70px; top: 20%; left: 25%; }
.star-small path { stroke: #FF8C00; }
.star-small.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }

.star-medium { width: 130px; top: 50%; right: 10%; }
.star-medium path { stroke: #008080; }
.star-medium.active path { fill: url(#grad-green); opacity: 1; filter: drop-shadow(0 0 20px rgba(0, 128, 128, 0.6)); }


/* 3 */

.final-section,
.puzzle-section,
.fifth-section {
    display: none;
}

body.game-won .final-section,
body.game-won .puzzle-section {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

body.puzzle-won .fifth-section {
    display: block;
    height: 100vh;
}


.final-section {
    position: relative;
    overflow: hidden;
}

.carousel-container {
    display: flex;
    gap: 20px;
    width: 100%;
    padding: 0 10vw;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-container::-webkit-scrollbar { display: none; }

.carousel-img {
    height: 60vh;
    width: auto;
    max-width: 80vw;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
    user-select: none;
    -webkit-user-drag: none;
}

.carousel-container.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel-caption {
    position: absolute;
    bottom: 5vh;
    width: 100%;
    text-align: center;
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: lowercase;
    font-family: 'Skifer', sans-serif;
}

/* 4 */
.puzzle-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.puzzle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    letter-spacing: 2px;
    text-transform: lowercase;
    line-height: 1.4;
    background: linear-gradient(90deg, #8474EA 0%, #D77984 23%, #C95937 36%, #EC9033 42%, #F6CD66 65%, #97AF6D 80%, #3F74C4 87%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 119, 160, 0.3));
    z-index: 2;
}


.puzzle-star {
    position: absolute;
    pointer-events: auto;
    transition: all 0.4s ease;
    overflow: visible;
}

.puzzle-star path {
    fill: transparent;
    transition: all 0.4s ease;
    stroke-width: 2px;
    opacity: 0.3;
}

.puzzle-star:hover path { opacity: 0.8; }

.p-big { width: 140px; top: 15%; left: 10%; }
.p-big path { stroke: #8A2BE2; }
.p-big.active path { fill: url(#grad-purple); opacity: 1; filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.6)); }

.p-small-1 { width: 60px; top: 20%; right: 20%; }
.p-small-1 path { stroke: #FF8C00; }
.p-small-1.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }

.p-medium { width: 100px; bottom: 20%; left: 20%; }
.p-medium path { stroke: #008080; }
.p-medium.active path { fill: url(#grad-green); opacity: 1; filter: drop-shadow(0 0 20px rgba(0, 128, 128, 0.6)); }

.p-small-2 { width: 70px; bottom: 15%; right: 15%; }
.p-small-2 path { stroke: #FF8C00; }
.p-small-2.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }
body.no-scroll {
    overflow: hidden;
}
/* 5 */
.fifth-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


body .fifth-section {
    display: flex;
}


.fifth-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 6 */
.sandbox-section {
    height: 100vh;
    position: relative;
    display: none;
}

body.all-combos-found .sandbox-section {
    display: flex;
}


.sandbox-star {
    position: absolute;
    pointer-events: auto;
    transition: all 0.4s ease;
    overflow: visible;
    cursor: none !important;
}

.sandbox-star path {
    fill: transparent;
    transition: all 0.4s ease;
    stroke-width: 2px;
    opacity: 0.3;
}

.sandbox-star:hover path { opacity: 0.8; }


.s-big { width: 120px; top: 20%; left: 10%; }
.s-big path { stroke: #8A2BE2; }
.s-big.active path { fill: url(#grad-purple); opacity: 1; filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.6)); }

.s-small-1 { width: 50px; top: 15%; right: 25%; }
.s-small-1 path { stroke: #FF8C00; }
.s-small-1.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }

.s-medium { width: 90px; top: 60%; left: 20%; }
.s-medium path { stroke: #008080; }
.s-medium.active path { fill: url(#grad-green); opacity: 1; filter: drop-shadow(0 0 20px rgba(0, 128, 128, 0.6)); }

.s-small-2 { width: 60px; bottom: 15%; right: 15%; }
.s-small-2 path { stroke: #FF8C00; }
.s-small-2.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }

.s-medium-2 { width: 80px; bottom: 30%; right: 30%; }
.s-medium-2 path { stroke: #008080; }
.s-medium-2.active path { fill: url(#grad-green); opacity: 1; filter: drop-shadow(0 0 20px rgba(0, 128, 128, 0.6)); }

.s-small-3 { width: 50px; top: 40%; right: 10%; }
.s-small-3 path { stroke: #FF8C00; }
.s-small-3.active path { fill: url(#grad-orange); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }

/* 7 */
.sandbox-carousel-section {
    height: 100vh;
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.sandbox-carousel-won .sandbox-carousel-section {
    display: flex;
}