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

html,
body{
    width:100%;
    height:100%;
}

body{

    background:#121213;
    color:white;

    font-family:Arial, Helvetica, sans-serif;

    overflow:hidden;

}

#wrapper{

    width:100vw;
    height:100svh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    overflow:hidden;

    padding-top:30px;

}

/* 새로 추가 */
#scaleContainer{
    position: relative;
    display: flex;
    justify-content: center;
    transform-origin: top center;
}

#game{

    width:420px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

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

#header{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:28px;

    max-height:120px;

    opacity:1;

    overflow:hidden;

    transition:
        opacity .8s ease,
        max-height .8s ease,
        margin .8s ease;

}

#header.hide{

    opacity:0;

    max-height:0;

    margin-bottom:0;

}

h6{

    color:#999;

    margin-bottom:8px;

}

h1{

    letter-spacing:3px;

}

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

#board{

    display:grid;

    grid-template-columns:repeat(5,64px);

    gap:6px;

}

.tile{

    width:64px;
    height:64px;

    border:2px solid #3A3A3C;

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

    font-size:34px;
    font-weight:bold;

}

.green{

    background:#6aaa64;
    border-color:#6aaa64;
}

.yellow{

    background:#c9b458;
    border-color:#c9b458;
}

.gray{

    background:#787c7e;
    border-color:#787c7e;
}

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

#keyboard{

    margin-top:26px;

    display:flex;
    flex-direction:column;

    gap:8px;

    align-items:center;

}

.key-row{

    display:flex;

    gap:6px;

}

.key{

    width:42px;
    height:58px;

    border:none;

    border-radius:4px;

    background:#d3d6da;

    font-weight:bold;

    cursor:pointer;

    user-select:none;

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

}

.key.big{

    width:70px;

}

.key.green{

    background:#6aaa64;
    color:white;

}

.key.yellow{

    background:#c9b458;
    color:white;

}

.key.gray{

    background:#787c7e;
    color:white;

}

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

@keyframes flip{

    0%{
        transform:rotateX(0deg);
    }

    50%{
        transform:rotateX(90deg);
    }

    100%{
        transform:rotateX(0deg);
    }

}

.flip{

    animation:flip .5s ease;

}

#toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    background:#222;
    color:#fff;
    padding:12px 18px;
    border-radius:8px;
    font-weight:bold;
    opacity:0;
    transition:.25s;
    pointer-events:none;
    z-index:1000;
}

#toast.show{
    opacity:1;
    transform:translate(-50%,10px);
}

#game-actions{
    display:flex;
    justify-content:center;
    margin-top:18px;
}

#game-actions.hidden{
    display:none;
}

#share-btn{
    padding:10px 18px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
}

#share-modal{

    position:fixed;
    inset:0;

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

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

    backdrop-filter:blur(6px);

    z-index:999;

}

#share-modal.hidden{

    display:none;

}

.modal{

    width:440px;
    max-width:90vw;

    background:#1e1f22;

    border:1px solid #3a3a3c;
    border-radius:16px;

    padding:28px;

    color:white;

    display:flex;
    flex-direction:column;
    gap:18px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.modal h2{

    text-align:center;
    font-size:24px;

}

.modal p{

    text-align:center;
    color:#b5bac1;

    line-height:1.5;

}

#share-text{

    width:100%;
    height:190px;

    padding:14px;

    resize:none;

    background:#121213;

    border:1px solid #3a3a3c;
    border-radius:10px;

    color:white;

    font-family:Consolas, monospace;
    font-size:16px;
    line-height:1.5;

}

.modal button{

    height:46px;

    border:none;
    border-radius:10px;

    background:#5865F2;
    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.modal button:hover{

    background:#4752c4;

}

#loading-screen{

    position:fixed;

    top:50%;
    left:50%;

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

    display:flex;

    flex-direction:column;

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

    gap:12px;

    background:#121213;

    z-index:9999;

}


#loading-screen.hidden{

    display:none;

}

#loading-screen.hidden{
    display: none;
}

#game{
    width:420px;

    display:flex;
    flex-direction:column;
    align-items:center;
}