/* ==========================
   RESET
========================== */

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

body {

    font-family: 'Poppins', sans-serif;

    background:
        radial-gradient(circle at top,
            #09111f 0%,
            #04070f 50%,
            #000 100%);

    color: #fff;

    min-height: 100vh;

    overflow-x: hidden;
}


/* ==========================
   STARS BACKGROUND
========================== */

.stars {

    position: fixed;

    inset: 0;

    z-index: -1;

    background-image:
        radial-gradient(#ffffff 1px, transparent 1px);

    background-size: 40px 40px;

    opacity: .08;

    animation: starsMove 60s linear infinite;
}

@keyframes starsMove {

    from {

        transform: translateY(0);
    }

    to {

        transform: translateY(-400px);
    }
}


/* ==========================
   HEADER
========================== */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 25px;
}

.brand {

    display: flex;

    align-items: center;

    gap: 15px;
}

.brand img {

    width: 70px;

    filter:
        drop-shadow(0 0 12px rgba(255, 94, 20, .6));
}

.brand h1 {

    font-family: 'Orbitron', sans-serif;

    color: #ff6a00;

    font-size: 30px;
}

.brand p {

    color: #bfbfbf;

    font-size: 14px;
}


/* ==========================
   HERO
========================== */

.hero {

    text-align: center;

    padding: 20px 25px;
}

.hero h2 {

    font-family: 'Orbitron';

    color: #ff7a1c;

    font-size: 42px;

    margin-bottom: 15px;
}

.hero p {

    max-width: 700px;

    margin: auto;

    color: #cfcfcf;

    line-height: 1.8;
}


/* ==========================
   STATS
========================== */

.stats {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 30px 20px;
}

.card {

    min-width: 150px;

    text-align: center;

    padding: 20px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .04);

    border:
        1px solid rgba(255, 106, 0, .25);

    backdrop-filter: blur(12px);

    box-shadow:
        0 0 20px rgba(255, 106, 0, .08);
}

.label {

    display: block;

    color: #ff8f3d;

    margin-bottom: 10px;
}

.card span:last-child {

    font-size: 28px;

    font-weight: 700;
}


/* ==========================
   OBJECTIVE
========================== */

.objective {

    width: min(95%, 900px);

    margin: auto;

    padding: 25px;

    border-radius: 25px;

    background:
        rgba(255, 255, 255, .03);

    border:
        1px solid rgba(255, 106, 0, .25);
}

.objective h3 {

    color: #ff7a1c;

    margin-bottom: 12px;
}

.objective p {

    color: #d7d7d7;

    line-height: 1.8;
}


/* ==========================
   GAME AREA
========================== */

.game-area {

    display: flex;

    justify-content: center;

    padding: 40px 20px;
}


/* ==========================
   PUZZLE BOARD
========================== */

.board {

    width: 750px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


/* ==========================
   TILES
========================== */

.tile {

    aspect-ratio: 1;

    border-radius: 20px;

    cursor: pointer;

    border:
        2px solid rgba(255, 106, 0, .35);

    transition: .25s ease;

    overflow: hidden;
}

.tile:hover {

    transform: scale(1.04);

    box-shadow:
        0 0 25px rgba(255, 106, 0, .4);
}


/* LOGO TILE */

.logo-tile {

    background-image:
        url("images/puzzel-model.jpeg");

    background-size: 300% 300%;

    background-repeat: no-repeat;
}


/* EMPTY TILE */

.empty {

    background:
        rgba(255, 255, 255, .05);

    border:
        2px dashed rgba(255, 255, 255, .15);

    cursor: default;
}

.empty:hover {

    transform: none;

    box-shadow: none;
}


/* ==========================
   CONTROLS
========================== */

.controls {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 20px 20px 50px;
}


/* ==========================
   BUTTONS
========================== */

button {

    border: none;

    outline: none;

    cursor: pointer;

    padding: 15px 35px;

    border-radius: 18px;

    font-weight: 700;

    font-size: 15px;

    color: #fff;

    background:
        linear-gradient(135deg,
            #ff5a00,
            #ff9500);

    transition: .25s;
}

button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 25px rgba(255, 106, 0, .45);
}


/* ==========================
   WIN MODAL
========================== */

.modal {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, .85);

    display: none;

    justify-content: center;

    align-items: center;

    padding: 20px;
}

.modal.active {

    display: flex;
}

.modal-content {

    width: min(90%, 500px);

    text-align: center;

    padding: 40px;

    border-radius: 30px;

    background:
        linear-gradient(180deg,
            #111827,
            #0a0d14);

    border:
        1px solid rgba(255, 106, 0, .3);
}

.modal-content h2 {

    color: #ff7a1c;

    margin-bottom: 20px;
}

.modal-content p {

    color: #d6d6d6;

    line-height: 1.8;
}

.result {

    margin: 30px 0;
}

.result p {

    margin: 12px 0;
}


/* ==========================
   CONFETTI
========================== */

#confettiContainer {

    position: fixed;

    inset: 0;

    pointer-events: none;
}

.confetti {

    position: absolute;

    width: 10px;

    height: 10px;

    background: #ff7a1c;

    animation:
        confettiFall 3s linear forwards;
}

@keyframes confettiFall {

    from {

        transform:
            translateY(-100px) rotate(0deg);

        opacity: 1;
    }

    to {

        transform:
            translateY(110vh) rotate(720deg);

        opacity: 0;
    }
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px) {

    .hero h2 {

        font-size: 32px;
    }

    .board {

        width: 480px;
    }

    .card {

        min-width: 130px;
    }

    button {

        width: 100%;
    }

    .controls {

        padding: 20px;
    }
}

@media(max-width:480px) {

    header {

        justify-content: center;

        text-align: center;
    }

    .brand {

        flex-direction: column;
    }

    .board {

        width: 400px;
    }

    .hero h2 {

        font-size: 26px;
    }
}