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

body{
    font-family:Arial,sans-serif;
    background:#f4efe5;
    overflow:hidden;
}

.screen{
    display:none;
    width:100vw;
    height:100vh;
}

.active{
    display:flex;
}

#start-screen,
#finish-screen{
    justify-content:center;
    align-items:center;
}

.start-card,
.finish-card{

    background:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

    width:90%;
    max-width:500px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

.subtitle{
    margin-top:15px;
    margin-bottom:25px;
}

button{

    border:none;

    padding:15px 25px;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    background:#2d7ef7;

    color:white;

    transition:0.2s;
}

button:hover{
    transform:scale(1.03);
}

#game-screen{

    flex-direction:column;

    align-items:center;

    padding:20px;
}

header{

    width:100%;
    max-width:1000px;

    margin-bottom:20px;
}

.progress-wrapper{

    width:100%;
    height:24px;

    background:#ddd;

    border-radius:30px;

    overflow:hidden;
}

#progress-bar{

    width:0%;

    height:100%;

    background:#2d7ef7;

    transition:0.5s;
}

#level-title{

    margin-top:15px;

    text-align:center;

    font-size:24px;

    font-weight:bold;
}

#puzzle-board{

    width:700px;
    height:700px;

    background:white;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);

    position:relative;
}

.puzzle-piece{

    position:absolute;

    cursor:grab;

    border:1px solid rgba(255,255,255,0.3);

    background-repeat:no-repeat;

    user-select:none;
}

#page-screen{

    justify-content:center;
    align-items:center;
}

.page-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;
}

#book-page{

    max-height:85vh;

    max-width:90vw;

    border-radius:12px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);
}

#player-name{

    width:100%;

    padding:15px;

    margin-top:20px;
    margin-bottom:20px;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:18px;
}

#sound-control{

    position:fixed;

    right:20px;
    top:20px;

    width:50px;
    height:50px;

    background:white;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:25px;

    cursor:pointer;

    box-shadow:
    0 5px 15px
    rgba(0,0,0,0.2);

    z-index:5000;

}

#game-hint{

    text-align:center;

    margin-top:8px;

    color:#777;

    font-size:15px;

}

.puzzle-piece{

    touch-action:none;

    transition:
        box-shadow 0.2s,
        transform 0.2s;

}

.puzzle-piece.dragging{

    transform:scale(1.05);

    box-shadow:
    0 10px 25px
    rgba(0,0,0,0.3);

    cursor:grabbing;

    z-index:1000;

}

.puzzle-piece.solved{

    animation:
        puzzleSolved 0.6s ease;

}

@keyframes puzzleSolved{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

#page-screen{

    background:
    #eee7d8;

    opacity:0;

}

#page-screen.active{

    animation:
    pageAppear 0.8s ease forwards;

}

@keyframes pageAppear{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

#book-page{

    opacity:0;

    transform:
        scale(0.95);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}

#book-page.page-visible{

    opacity:1;

    transform:
        scale(1);

}

@media(max-width:900px){

    #puzzle-board{

        width:90vw;
        height:90vw;
    }

}

/* =====================================
   СЕРТИФИКАТ
   ===================================== */

#certificate-screen{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    overflow:auto;

    padding:30px;

    background:
        radial-gradient(
            circle at 20% 20%,
            #fff7d6 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 80%,
            #e4f4ff 0,
            transparent 30%
        ),
        #f4efe5;

}


/* Сам сертификат */

.certificate{

    position:relative;

    width:min(1000px, 90vw);

    aspect-ratio:1.414 / 1;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,0.9),
            rgba(255,248,225,0.95)
        );

    border:12px solid #c99b45;

    outline:3px solid #ead29a;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,0.25);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:60px;

    text-align:center;

    overflow:hidden;

}


/* Внутренняя рамка */

.certificate::before{

    content:"";

    position:absolute;

    inset:20px;

    border:2px solid #d8b66a;

    pointer-events:none;

}


/* Декоративные элементы */

.certificate-decoration{

    position:absolute;

    font-size:30px;

    color:#c99b45;

    letter-spacing:12px;

}

.decoration-top{

    top:28px;

}

.decoration-bottom{

    bottom:28px;

}


/* Книжка */

.certificate-book{

    font-size:55px;

    margin-bottom:10px;

}


/* Заголовок */

.certificate-label{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:48px;

    font-weight:bold;

    letter-spacing:8px;

    color:#7c4f24;

}


.certificate-subtitle{

    font-size:18px;

    margin-top:5px;

    color:#806b58;

}


/* Разделитель */

.certificate-line{

    width:250px;

    height:2px;

    background:#c99b45;

    margin:20px 0;

}


/* Основной текст */

.certificate-text{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:20px;

    color:#55483d;

    line-height:1.5;

}


/* Имя */

.certificate-name{

    margin:10px 0 15px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:42px;

    font-weight:bold;

    color:#365c72;

    min-height:50px;

}


/* Название книги */

.certificate-book-title{

    margin:10px 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:30px;

    font-weight:bold;

    font-style:italic;

    color:#7c4f24;

}


.certificate-small{

    font-size:17px;

    margin-top:5px;

}


/* Звёзды */

.certificate-stars{

    margin-top:20px;

    font-size:28px;

    letter-spacing:8px;

    color:#d19b31;

}


/* Нижняя часть */

.certificate-footer{

    width:80%;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-top:25px;

    font-size:14px;

    color:#665b51;

}


/* Кнопки */

.certificate-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}


.secondary-button{

    background:#777;

}


/* Адаптация */

@media(max-width:700px){

    .certificate{

        width:95vw;

        padding:35px 25px;

    }

    .certificate-label{

        font-size:30px;

        letter-spacing:4px;

    }

    .certificate-name{

        font-size:30px;

    }

    .certificate-book-title{

        font-size:22px;

    }

    .certificate-text{

        font-size:15px;

    }

    .certificate-stars{

        font-size:20px;

    }

}