html {
    overflow: hidden; /* Запрещает прокрутку */
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: white;
    background-image: linear-gradient(rgba(0, 0, 0, 0.02) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 2px, transparent 2px);
    background-size: 4vh 4vh;
    background-position: center center; 
    font-size: 16px;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.screen { text-align: center; }
#scores { text-align: left; margin: 1vh auto 2vh auto; }
#scores span { color: #b5b5b5; font-size: 2vw; display: block; }

#levels button {

    color: #fff;
    border: none;


    cursor: pointer;
    
    display: block;
}
#random { background: #1c1c1c; margin: auto;}

.black-box { background: #1d7294; color: #fff; padding: 10px; font-size: 4vw; border-radius: 5px; text-align: center; }

#answers button {
    display: block;
    background: #367d65;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 75%;
    padding: 2vh 0;
    font-size: 4vh;
    border-radius: 1vh;
}

#answers button:disabled { opacity: 1; cursor: not-allowed; }

#word-type {
    color: #ffffff;
    text-align: center;
    font-weight: 600;
}

body.dark { background: #1e1e1e; color: #fff; }
body.dark #scores span, body.dark #level, body.dark #score { color: #fff; }
body.dark .black-box, body.dark #levels button, body.dark #word-type { background: #fdc000; color: #1c1c1c; }
body.dark #answers button { background: #fff; color: #1c1c1c; }

/* Адаптивность */
@media (orientation: landscape) {
    body { font-size: 20px; }
    #menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 95vh;
    }
    #game {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 98vh;
    }
    img {margin: 1vh 0.3vw;}    
     #top2 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        max-width: 95%;
        margin: 0 auto 3vh auto;
        align-items: center;
        gap: 6vw;
    }
    
    #top2 > div:first-child {
        grid-column: 1;
        justify-self: start;
    }
    
    #top {
        grid-column: 2;
        display: flex;
        justify-content: center;
        gap: 0.5vw;
    }
    
    #top3 {
        grid-column: 3;
        justify-self: end;
    }
        #word-type {
        font-size: 4vh;
        font-weight: 600;
    }
    #scores {     
        display: flex;
        justify-content: space-evenly; 
        gap: 6vw;
        }
        #top3 {
            display: flex;
            flex-wrap: nowrap;
            align-content: center;
            flex-direction: column;
            justify-content: space-evenly;
        }
    #levels-list { display: flex; flex-wrap: nowrap; justify-content: center;max-width: 80%; margin: auto; }
    #a1, #a2, #b1, #b2, #c1, #c2 { margin: 1vh 0.5vw; font-size: 3vw; font-weight: 700; }
    #a1 {background-color: #2fc546;}
    #a2 {background-color: #088b1c;}
    #b1 {background-color: #2f4fc5;}
    #b2 {background-color: #0f1c6d;}
    #c1 {background-color: #c52f2f;}
    #c2 {background-color: #851111;}
    #levels button { padding: 3vh 2vw; border-radius: 2vw;}
    #text { font-family: Caveat; font-size: 5vw; margin: -2vh 0 0 0;}
    #random {margin: 0px auto; font-size: 6vw; font-weight: 600;}
    #home, #theme-toggle-game, #sound-toggle-menu, #sound-toggle-game { width: 6.5vh; height: 6.5vh; cursor: pointer; }
    #theme-toggle { width: 6.5vh; height: 6.5vh; cursor: pointer;}
    #lives img { width: 5vh; height: 5vh; margin: 0 0.3vw; }
    #level, #score { color: #1c1c1c; font-size: 5vh; text-align: left; /*margin: 5px 0;*/ font-weight: 700; }
    #level { margin: 3vh 0 0 0; }
    #score { margin: -0.4vw 0 0 0; }
    #question.black-box { margin: 1vh auto; font-size: 8vh; border-radius: 2vw; padding: 4vh; font-weight: 700; width: 60vw; }
    #answers { 
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 2vh; 
        width: 60vw;
        height: 22vh; 
        margin: 2vh auto; }
    #answers button { width: 100%; padding: 3vh 0; font-size: 5.5vh; border-radius: 1.5vw; }
    .hint { font-size: 4.5vh; margin: 6vh auto 0 auto; max-width: 55vw; }
}

@media (orientation: portrait) {
    img {margin: 1vh 0.3vw;}
    #menu {
        padding: 0;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 94vh;
    }  
    .screen {
        /* padding: 3vh; */
        /* margin: 0 auto; */
        /* text-align: center; */
        padding: 0;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    #top {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0vh auto 2vh auto;
        gap: 1.4vw;
    }
    #top2 {         
        display: flex;
        justify-content: space-around;
        width: 75vw;
        margin: 1vh auto;
        flex-wrap: nowrap;
        align-items: center; 
    }
    #top3 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-evenly;
    }
    #scores {  
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        margin:  2vh 0 2vh 0;
        align-items: center;
    }
    #scores span {
        font-size: 4vw;
        
    }
    #levels-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 80%;
        margin: auto;
        flex-direction: row;
    }
    #a1, #a2, #b1, #b2, #c1, #c2 { margin: 1.4vw; font-size: 8vw; font-weight: 700; }
    #a1 {background-color: #2fc546;}
    #a2 {background-color: #088b1c;}
    #b1 {background-color: #2f4fc5;}
    #b2 {background-color: #0f1c6d;}
    #c1 {background-color: #c52f2f;}
    #c2 {background-color: #851111;}
    #levels-list button { padding: 3vh 5vw; border-radius: 4vw;}
    #random {font-size: 10vw; padding: 3vh 6vw; border-radius: 4vw; font-weight: 600;}
    #text { font-family: Caveat; font-size: 10vw; margin: -2vh 0 0 0;}
    #home, #theme-toggle-game, #sound-toggle-game, #sound-toggle-menu { width: 8vw; height: 8vw; cursor: pointer; }
    #theme-toggle { width: 8vw; height: 8vw; cursor: pointer;}
    #lives img { width: 6vw; height: 6vw; margin: 0 0.5vw; }
    #level, #score { color: #1c1c1c; font-size: 4vh; text-align: left; font-weight: 700; }
    #word-type { font-size: 2.5vh;}
    #question.black-box {         
        padding: 3vh 1vh;
        width: 80vw;
        margin: 1vh auto;
        font-weight: 600;
        font-size: 4vh;
        border-radius: 3vh; 
    }
    .hint { 
        font-size: 4vw;
        margin: 1vh auto 0 auto;
        max-width: 70vw;
    }
    #answers button { margin: .5vh auto 1.5vh auto; border-radius: 2vh; width: 76vw;}
}