@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
min-height: 100vh;
background: rgb(19, 72, 142);
background: linear-gradient(90deg, rgba(19, 72, 142, 1) 0%, rgba(31, 138, 207, 1) 35%, rgba(19, 72, 142, 1) 100%);
}

.container {
width: 850px;
background: rgba(255, 255, 255, 0.9);
display: flex;
gap: 70px;
align-items: flex-end;
padding: 60px 40px;
border-radius: 35px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.box img {
max-width: 270px;
}

.box h1 {
font-size: 1.6rem;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
color: #08305b;
}

.box h1 span {
font-size: 1.6rem;
color: #ff0000;
}

.words {
display: flex;
gap: 10px;
list-style: none;
align-items: center;
justify-content: center;
}

.words .letter {
width: 20px;
font-size: 2rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
margin-bottom: 40px;
border-bottom: 3px solid #08305b;
}

.words .letter.guessed {
border-color: transparent;
margin: -40px 0 35px;
}

.gbox h4 {
text-align: center;
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 15px;
}

.gbox h4 b {
font-weight: 600;
color: #007676;
}

.gbox .guess b {
color: #007676;
}

.gbox .keyboard {
display: flex;
gap: 5px;
margin-top: 40px;
flex-wrap: wrap;
justify-content: center;
}

:where(.result, .keyboard) button {
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
outline: none;
padding: 7px;
border: none;
background: #ff2963;
border-radius: 4px;
text-transform: uppercase;
}

.keyboard button {
width: calc(100% / 9 - 5px);
}

.keyboard button[disabled] {
background: #1694ba;
opacity: 0.6;
pointer-events: none;
}

:where(.keyboard, .result) button:hover {
background: #1694ba;
color: #fff;
}

.result {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
padding: 0 10px;
pointer-events: none;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
}

.result.show {
opacity: 1;
pointer-events: auto;
}

.result .content {
background: #08305b;
color: #fff;
max-width: 420px;
width: 100%;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.result img {
max-width: 130px;
}

.result p {
font-size: 1.15rem;
margin: 15px 0 30px;
font-weight: 500;
}

.result p b {
color: #5e63ba;
font-weight: 600;
}

.result button {
padding: 12px 23px;
}

@media (max-width: 782px) {
.container {
flex-direction: column;
padding: 30px 15px;
align-items: center;
}
.box img {
    max-width: 200px;
}

.box h1 {
    display: none;
}
}