/*===============================*/
/* COLORS ETC. */
/*===============================*/

:root{
    --bg:#FCF8F7;
    --text: #000;
    --primary:#D1806C;
    --secondary:#D29A4D;
    --cell:#a8a7a7;
    --cell1: #CF4F84; 
    --cell2: #EFCA08;
    --cell3: #71D449; 
    --cell4: #5CA8FF;
    --cell5: #6F6AC8;
    --pyramid:#ededed;
    --cell-text: #000;
    --muted:#9aa7b2;
}

*{
    box-sizing:border-box;
    font-family:Catamaran;
}

@font-face {
    font-family: Zyzol;
    src: url('fonts/ZyzolRegular.woff') format('woff'), url('fonts/ZyzolRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:40px
}

.app{
    width:800px;
    max-width:96%;
}


/*===============================*/
/* TEXT AND BUTTONS */
/*===============================*/

header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

h1{
    font-family: Zyzol;
    font-size:70px;
    color:var(--primary);
    margin:auto;
    text-align: center;
    line-height: 1;
}

.status{
    text-align: center;
    margin-bottom:20px;
    font-size: 20px;
}

.controls{
    margin-top:20px;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content: center;
}

button{
    border:1px solid rgba(255,255,255,0.04);
    color:inherit;
    padding:10px 15px;
    padding-top:12px;
    border-radius:30px;
    cursor:pointer;
    font-weight: 900;
    width: 120px;
    transition: 0.3s ease;
}

button.primary{
    background: var(--primary);
    color:#04212a;
}

button.secondary{
    background: var(--secondary);
    color:#04212a;
}

button:hover{
    opacity:0.7;
}

button:disabled{
    opacity:0.2;
    background: var(--muted);
    cursor:not-allowed
}

.small{
    text-align: center;
    margin-top: 20px;
    font-size:20px;
}


/*===============================*/
/* PYRAMID */
/*===============================*/

.pyramid{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    padding:18px;
    background:var(--pyramid);
    border-radius:12px;
}

.row{
    display:flex;
    gap:10px;
    justify-content:center;
}

.cell{
    min-width:120px;
    padding:20px 12px;
    border-radius:10px;
    background:var(--cell);
    color: var(--cell-text);
    text-align:center;
    cursor:pointer;
    user-select:none;
    transition: all 0.3s ease;
}

.cell:hover{
    opacity: 0.85;
}

.cell.selected1 { background-color: var(--cell1); } 
.cell.selected2 { background-color: var(--cell2); } 
.cell.selected3 { background-color: var(--cell3); } 
.cell.selected4 { background-color: var(--cell4); } 
.cell.selected5 { background-color: var(--cell5); }

.cell.selected1, .cell.selected2, .cell.selected3, .cell.selected4, .cell.selected5 {
    transform: scale(1.05);
}

.cell.correct1 { background-color: var(--cell1); } 
.cell.correct2 { background-color: var(--cell2); } 
.cell.correct3 { background-color: var(--cell3); } 
.cell.correct4 { background-color: var(--cell4); } 
.cell.correct5 { background-color: var(--cell5); }


/*===============================*/
/* ANSWER BOXES */
/*===============================*/

.locked {
    display: none;
}

.merged2, .merged3, .merged4, .merged5 {
    padding-top: 7px;
    padding-bottom: 7px;
}

.merged2 {width: 250px;}
.merged3 {width: 380px;}
.merged4 {width: 510px;}
.merged5 {width: 640px;}


/*===============================*/
/* MOBILE USE */
/*===============================*/

@media (max-width:800px){
    .cell{
        min-width: 72px;
        padding: 14px 6px;
        font-size: 14px;
    }

    .merged2, .merged3, .merged4, .merged5 {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .merged2 {width: 154px;}
    .merged3 {width: 236px;}
    .merged4 {width: 318px;}
    .merged5 {width: 400px;}
}

@media (max-width:660px){
    h1{
        font-size: 50px;
    }

    .status{
        font-size: 16px;
    }
    
    button{
        font-size: 14px;
    }
}

@media (max-width:520px){
    h1{
        padding-top: 20px;
        font-size: 10vw;
    }

    .status{font-size: 4.5vw;}

    .small{font-size: 4.5vw;}

    button{font-size: 2.7vw;}

    .cell{
        min-width: 50px;
        padding:12px 5px;
        font-size: 3vw;
    }

    .pyramid{
        padding-left: 5px;
        padding-right: 5px;
    }

    body{padding: 15px}

    .merged2, .merged3, .merged4, .merged5 {
        padding-top: calc(12px - 3vw/2);
        padding-bottom: calc(12px - 3vw/2);
    }
    
    .merged2 {width: calc(2 * 50px + 10px);}
    .merged3 {width: calc(3 * 50px + 20px);}
    .merged4 {width: calc(4 * 50px + 30px);}
    .merged5 {width: calc(5 * 50px + 40px);}
}