/* ===================================================
   KIIZ UI GAME
   style.css
=================================================== */

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

:root{

    --blue:#2E86DE;
    --blue2:#54A0FF;

    --green:#2ECC71;

    --red:#E74C3C;

    --bg:#EEF6FD;

    --card:#FFFFFF;

    --text:#2C3E50;

    --shadow:0 12px 30px rgba(0,0,0,.08);

    --radius:20px;

}

body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:linear-gradient(
        180deg,
        #dff2ff 0%,
        #eef7ff 100%
    );

    color:var(--text);

    min-height:100vh;

}

/*==============================*/

#app{

    width:min(1400px,95%);

    margin:auto;

    padding:25px;

}

/*==============================*/

header{

    margin-bottom:25px;

}

header h1{

    text-align:center;

    font-size:40px;

    margin-bottom:20px;

    color:#17406b;

}

/*==============================*/

#progress{

    height:18px;

    border-radius:100px;

    background:#d8e7f7;

    overflow:hidden;

}

#progressBar{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #00c853,
        #64dd17
    );

    transition:.4s;

}

/*==============================*/

#counter{

    text-align:right;

    margin-top:10px;

    font-weight:bold;

    font-size:18px;

}

/*==============================*/

main{

    display:grid;

    grid-template-columns:

        2fr

        1fr;

    gap:30px;

}

/*==============================*/

#gameArea{
    position:relative;
    background:white;
    border-radius:25px;
    box-shadow:var(--shadow);
    overflow:hidden;
    /* УДАЛИТЕ min-height: 720px; */
    aspect-ratio: 4 / 3; /* Заставляем блок всегда держать пропорцию */
}

/*==============================
  Контейнер сцены
==============================*/

#scene {
    position: absolute; /* Меняем relative на absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==============================*/

#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Эти свойства заставят фон заполнить экран без искажения пропорций */
    object-fit: cover; 
    
    /* Это свойство двигает картинку. 
       Увеличьте процент (например, до 80% или 100%), чтобы опустить фон ниже.
       Уменьшите процент, чтобы поднять его. */
    object-position: center 80%; 
    
    user-select: none;
    -webkit-user-drag: none;
}

/*==============================*/

#frame{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:76%;

}

/*==============================*/

#quiz{

    background:white;

    border-radius:25px;

    padding:30px;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

}

/*==============================*/

#question{

    font-size:28px;

    line-height:1.5;

    font-weight:700;

    margin-bottom:30px;

    color:#214161;

}

/*==============================
  Сообщения
==============================*/

#message{

    min-height:30px;

    margin-bottom:20px;

    font-size:18px;

    font-weight:600;

    color:#2E86DE;

    text-align:center;

}

/*==============================*/

#answers{

    display:grid;

    gap:16px;

}

/*==============================*/

.answer{

    border:none;

    border-radius:16px;

    padding:18px;

    background:#F4F8FC;

    font-size:19px;

    cursor:pointer;

    text-align:left;

    transition:.25s;

}

.answer:hover{

    transform:translateY(-3px);

    background:var(--blue);

    color:white;

}

.answer:disabled{

    cursor:default;

}

/*==============================*/

.answer.correct{

    background:var(--green);

    color:white;

}

.answer.wrong{

    background:var(--red);

    color:white;

}

/*==============================*/

button{

    font-family:inherit;

}

/*==============================*/

.hidden {
    display: none !important;
}

/*==============================*/

#finishScreen{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.finishCard{

    width:min(450px,90%);

    background:white;

    border-radius:25px;

    padding:40px;

    text-align:center;

    animation:popup .35s ease;

}

.finishCard h2{

    font-size:38px;

    margin-bottom:15px;

}

.finishCard p{

    font-size:22px;

    margin-bottom:30px;

}

#restart{

    border:none;

    padding:16px 40px;

    border-radius:100px;

    background:var(--green);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

#restart:hover{

    transform:scale(1.05);

}

/*==============================*/

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==================================================
  ДЕТАЛИ ЮРТЫ
==================================================*/

.piece{

    position:absolute;

    opacity:0;

    transform:translateY(20px) scale(.85);

    transition:
        opacity .45s ease,
        transform .45s ease;

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;

}

/* После правильного ответа */

.piece.show{

    opacity:1;

    transform:translateY(0) scale(1);

}

/*==============================
   Координаты деталей
   (можно потом немного подправить)
==============================*/

#kerege{

    width:44%;

    left:28%;

    top:49%;

}

#uik{

    width:42%;

    left:29%;

    top:30%;

}

#shanyrak{

    width:15%;

    left:42.4%;

    top:34%;

}

#esik{
    width:23%;
    left:38%;
    top:63%;
}

#tuyrlyk{

    width:47%;

    left:26.5%;
    top:44%;

}

#uzik{

    width:43.7%;

    left:28%;

    top:30%;

}

#tundik{

    width:36%;

    left:32%;

    top:28%;

}

/*==================================================
  ПЛАВНОЕ ПОЯВЛЕНИЕ
==================================================*/

.fade{

    animation:fade .45s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
  МОБИЛЬНАЯ ВЕРСИЯ
==================================================*/

@media(max-width:1100px){
    main{
        display:block;
    }
    #gameArea{
        /* УДАЛИТЕ СТРОКУ: min-height:620px; */
        margin-bottom:25px;
    }
    #quiz{
        padding:25px;
    }
}

/*==============================*/

@media(max-width:768px){

#app{

padding:15px;

}

header h1{

font-size:30px;

}

#question{

font-size:22px;

}

.answer{

font-size:17px;

padding:15px;

}

#gameArea{
        /* УДАЛИТЕ ВЕСЬ ЭТОТ БЛОК ИЛИ СТРОКУ min-height:470px; */
    }

.finishCard{

padding:30px;

}

.finishCard h2{

font-size:30px;

}

.finishCard p{

font-size:18px;

}

}

/*==================================================
  НЕБОЛЬШИЕ ЭФФЕКТЫ
==================================================*/

.answer{

position:relative;

overflow:hidden;

}

.answer::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.6s;

}

.answer:hover::after{

left:120%;

}

/*==================================================
  ПУЛЬС ПОСЛЕ УСТАНОВКИ ДЕТАЛИ
==================================================*/

.pulse{

animation:pulse .4s;

}

@keyframes pulse{

0%{

transform:scale(1);

}

40%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/*==================================================
  ПРОКРУТКА
==================================================*/

html{

scroll-behavior:smooth;

}

/*==================================================
  ВЫДЕЛЕНИЕ ТЕКСТА
==================================================*/

::selection{

background:#2E86DE;

color:#fff;

}

/*==============================
  Появление вопроса
==============================*/

#question{

    animation:fade .35s ease;

}