body{
    font-family: "Arial", sans-serif;
    margin:0;
    padding:0;
    background-color: #ab482a;
    background-image: url("assets/paper-texture.png");
    background-size: cover;
}

.game-page #game-screen{
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;

    min-height:100dvh;
    padding:12px;
}
.name{
    font-size: 25px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: antiquewhite;
}

.tiles-container{
    display: grid;
    grid-template-columns: repeat(5, 62px);
    grid-template-rows: repeat(6, 62px);
    gap: 5px;    
}

.tile {
    height: 62px;
    width: 62px;
    display :flex;
    justify-content: center;
    align-items: center;
    border : 2px solid #af9981;
    font-size: 35px;
    font-weight: bold;
    color:antiquewhite;
    background-color: rgba(255,255,255,0.05);
    transform-style: preserve-3d;

}

.tile.flip {
    animation: flip 0.6s ease;
}


@keyframes flip {

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

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

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

}

.smalllogo {
    width: 250px;
    margin-top: 10px;
    margin-bottom: 5px;

}

#keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}


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


#keyboard button {
    width: 45px;
    height: 55px;

    background-color: #f1e2c6 ;
    color: #796a4e;

    border-radius:8px;
    border:none;

    font-family:Georgia, serif;
    font-size:18px;
    font-weight:bold;
}
.wide-key {
    width:75px !important;
    font-size:14px !important;
}

.key-image {
    width:100%;
    height:100%;
    object-fit:cover;
}
#keyboard button.correct{
    background-color:#3e5433;
    color: antiquewhite;
}

#keyboard button.present{
    background-color:#e09d41;
    color: antiquewhite;
}

#keyboard button.wrong{
    background-color:#af9981;
    color: antiquewhite;
}

#keyboard button:active{
    transform: scale(0.9);
}

.correct{
    background-color:#3e5433;
    border-color:#3e5433;
}

.present{
    background-color:#e09d41;
    border-color:#e09d41;
}

.wrong{
    background-color:#af9981;
    border-color:#af9981;
}

.shake {
    animation: shake 0.4s;
}

@keyframes shake {

    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(-10px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }

}

#message {
    height: 20px;
    margin-bottom: 15px;

    font-family: Georgia, serif;
    font-size: 22px;
    font-style: italic;
    color: antiquewhite;

    opacity: 0;
    transition: opacity 0.3s ease;
}


#message.show {
    opacity: 1;
}
@keyframes logoAnimation{
    0% {
        transform : scale(1);
    }
    30%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}

#welcome-screen{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}

.logo{
    width:550px;
    margin-top :250px;
    animation: logoAnimation 1.2s 1 ease-out forwards;

}

.tagline{
    font-size: 25px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: antiquewhite;
}

.play-btn{
  position:relative;
  display:inline-block;
}

.play-btn a{
  color:antiquewhite;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:20px;
  text-align: center;
  text-decoration:none;
  background-color:#3e5433;
  display:block;
  position:relative;
  padding:10px 20px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #232e1f;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0  #232e1f;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #232e1f;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.play-btn a:active{
  top:10px;
  background-color:#628252;
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #232e1f;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #232e1f;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #232e1f;
}

.play-btn:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#flower-border {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.border-flower {
    position: absolute;
    width: 40px;
}
#sticker-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.sticker {
    position: absolute;
    width: 400px;
}
.modal{
    position:fixed;
    inset:0;

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

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

    z-index:999;
}

.hidden{
    display:none;
}

.modal-card{

    width:340px;

    background:antiquewhite;
    color:#4f3b28;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 35px rgba(0,0,0,.3);

    text-align:center;

    font-family:Georgia, serif;

}

.modal-card h2{

    margin-top:0;
    font-style: italic;
    color:#a0373b;

}

.modal-section{

    margin:18px 0;

}

.label{

    font-size:14px;
    opacity:.7;
    margin-bottom:5px;

}

.word{

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

}

.meaning{

    font-size:20px;

}

.stat-row{

    display:flex;
    justify-content:space-between;

    margin:8px 0;

}

.modal-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.modal-actions button,
.modal-actions a{
    flex:1;
    padding:12px;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-family:Georgia,serif;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}

#share-btn{
    background:#3e5433;
    color:antiquewhite;
}

#share-btn:hover{
    opacity:.9;
}

.modal-archive-btn{
    background:#e09d41;
    color:#4f3b28;
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-archive-btn:hover{
    opacity:.9;
}
.modal-card{

    animation:popUp .25s ease;

}
@keyframes popUp{

    from{

        transform:scale(.8);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}
.home-buttons{
    display:flex;
    gap:16px;
    margin-top:10px;
}

.archive-home-btn a{
    background-color:#e09d41;
    box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #a66b1f;
}

.archive-home-btn a:active{
    background-color:#c98a35;
    box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #a66b1f;
}
.divider img{
    width:300px;
    opacity:.8;
}

.modal-title{
    white-space: pre-line;
    line-height:1.5;
}

.archive-page #archive-screen{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100dvh;
    padding:40px 20px;
}

.archive-back-btn{
    align-self:flex-start;
    margin-bottom:20px;
}

.archive-back-btn a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:antiquewhite;
    font-family:Helvetica,sans-serif;
    font-weight:bold;
    font-size:14px;
    text-decoration:none;
    background-color:#3e5433;
    padding:8px 16px;
    border-radius:5px;
    text-shadow:0px 1px 0px #000;
    box-shadow:inset 0 1px 0 #FFE5C4, 0 6px 0 #232e1f;
}

.archive-back-btn a:active{
    transform:translateY(6px);
    box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #232e1f;
}

.archive-title{
    font-family:Georgia,'Times New Roman',serif;
    font-style:italic;
    font-weight:bold;
    font-size:42px;
    color:antiquewhite;
    text-shadow:2px 2px 0 #232e1f;
    margin:0 0 8px;
}

.archive-tagline{
    font-family:Georgia,serif;
    font-style:italic;
    font-size:16px;
    color:antiquewhite;
    opacity:.85;
    margin:0 0 30px;
    text-align:center;
}

.archive-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(80px,1fr));
    gap:14px;
    max-width:600px;
    width:100%;
}

.archive-card{
    background:#f1e2c6;
    border:2px solid #4f3b28;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:14px 6px;
    box-shadow:0 4px 0 #232e1f;
}
.archive-card{
    cursor:pointer;
    transition:transform 0.15s ease;
}

.archive-card:hover{
    transform:translateY(-3px);
}

.archive-month{
    font-family:Georgia,serif;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    color:#e09d41;
}

.archive-date{
    font-family:Georgia,serif;
    font-size:24px;
    font-weight:bold;
    color:#4f3b28;
}

@media (max-width:600px){

     .logo{
        width:85%;
        margin-top:300px;
        
    }


    .tagline{
        font-size:18px;
        text-align:center;
        padding:0 20px;
    }


  .sticker{
    max-width:300px;
}

    #sticker-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

    .border-flower{
        width:25px;
    }

.tiles-container{
    width:min(92vw, 350px);

    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:6px;
}

.tile{
    aspect-ratio:1;
    width:100%;
}

    .archive-grid{
        grid-template-columns:repeat(3,minmax(70px,1fr));
    }
    .archive-title{
        font-size:32px;
    }


html{
    touch-action: manipulation;
}


#keyboard{
    width:min(98vw,500px);
}
#keyboard button{
    flex:1;
    height:58px;

    min-width:0;

    background:#f1e2c6;
    color:#796a4e;

    border:none;
    border-radius:8px;

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

.wide-key{
    flex:1.6 !important;
    font-size:13px !important;
}

.keyboard-row{
    display:flex;
    width:100%;
    gap:4px;
}


html, body{
    width:100%;
    height:100%;
    overflow-x:hidden;
}


.smalllogo{
    width:min(70vw,250px);
}

#welcome-screen{
    height:100dvh;
    overflow:hidden;
    justify-content:flex-start;

}

body{
        background-image: url("assets/paper-texture-mobile.png");
        background-size: cover;
        overflow-x: hidden;
    }
  #flower-border{
        display:none;
    }
    
}