@font-face{
    font-family:'Nohadra';
    src:url('../assets/fonts/nohadra.woff2');
}

@font-face{
    font-family:'Assyrian';
    src:url('../assets/fonts/assyrian.woff2');
}

.letter-btn{
    font-family:'Nohadra','Assyrian',sans-serif;
}

.writing-container{
    position:relative;
    width:350px;
    height:350px;
    margin:20px auto;
    max-width:90vw;
}


#writingCanvas{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background:white;

    border:2px solid #0033a0;

    border-radius:18px;

    touch-action:none;

    z-index:1;
}

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

.canvas-controls button{
    padding:10px 16px;
    font-size:16px;
}

#letterGrid{
    width:min(700px,95%);
    margin:25px auto;

    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
}

.letter-btn{
    border:none;
    border-radius:10px;
    padding:12px;

    font-size:2rem;

    background:#f0f4ff;

    cursor:pointer;
}

.letter-btn:hover{
    transform:scale(1.05);
}

.active-letter{
    background:#0033a0;
    color:white;
}

@media(max-width:768px){

    .writing-container{
        width:90vw;
        height:90vw;
    }

    #guideLetter{
        font-size:42vw;
    }

    .letter-btn{
        font-size:1.6rem;
        padding:10px;
    }
}