*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#171311;
color:#fff;

}

.game{
width:100%;
height:100vh;
display:grid;
grid-template-rows:80px 1fr;
padding:20px;
gap:20px;
}

.header{
display:flex;
justify-content:center;
align-items:center;
}

.logo{
font-size:42px;
font-weight:700;
letter-spacing:2px;
color:#d8a56d;
text-shadow:0 0 15px rgba(216,165,109,.3);
}

.main-layout{
display:grid;
grid-template-columns:58% 42%;
gap:30px;
height:100%;
}

.left-panel{
display:flex;
justify-content:center;
align-items:center;
}

.frame{
position:relative;
width:100%;
max-width:900px;
aspect-ratio:16/9;
padding:18px;
border-radius:20px;
background:linear-gradient(145deg,#9d6b3e,#744824,#4d2d18);
border:10px solid #ba8b54;
box-shadow:0 25px 45px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.15),inset 0 -4px 8px rgba(0,0,0,.4);
overflow:hidden;
}

.frame::before{
content:"";
position:absolute;
inset:10px;
border:3px solid rgba(255,255,255,.18);
border-radius:10px;
pointer-events:none;
}

.frame::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:40%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
transform:skewX(-25deg);
animation:shine 6s linear infinite;
}

#paintCanvas{
width:100%;
height:100%;
display:block;
background:#f8f3e8;
border-radius:8px;
box-shadow:inset 0 0 20px rgba(0,0,0,.18);
}

.right-panel{
display:flex;
flex-direction:column;
justify-content:center;
gap:28px;
}

.dashboard{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.card{
background:#211b18;
border:2px solid #3a2b21;
border-radius:16px;
padding:20px;
text-align:center;
transition:.3s;
}

.card:hover{
border-color:#d8a56d;
transform:translateY(-4px);
box-shadow:0 0 18px rgba(216,165,109,.25);
}

.card p{
font-size:14px;
color:#cfcfcf;
letter-spacing:1px;
}

.card h2{
margin-top:10px;
font-size:34px;
color:#d8a56d;
font-weight:700;
}
.progress-section{
width:100%;
}

.progress-bar{
width:100%;
height:18px;
background:#2a211d;
border-radius:50px;
overflow:hidden;
border:2px solid #3a2b21;
}

#progress-fill{
width:0%;
height:100%;
background:linear-gradient(90deg,#8b5e3c,#d8a56d);
transition:width .35s;
}

.word-section{
display:flex;
justify-content:center;
align-items:center;
min-height:80px;
}

#current-word{
font-size:48px;
font-weight:700;
color:#f7f1e6;
text-align:center;
letter-spacing:3px;
text-transform:uppercase;
}

.input-section{
display:flex;
justify-content:center;
align-items:center;
}

#typing-input{
width:100%;
height:68px;
padding:0 25px;
background:#211b18;
border:2px solid #3a2b21;
border-radius:15px;
outline:none;
color:#fff;
font-size:24px;
text-align:center;
transition:.3s;
}

#typing-input:focus{
border-color:#d8a56d;
box-shadow:0 0 18px rgba(216,165,109,.25);
}

.controls{
display:flex;
justify-content:center;
gap:20px;
}

.controls button{
min-width:180px;
height:60px;
border:none;
border-radius:14px;
background:#8b5e3c;
color:#fff;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.controls button:hover{
background:#d8a56d;
transform:translateY(-3px);
box-shadow:0 0 18px rgba(216,165,109,.3);
}

.controls button:active{
transform:scale(.97);
}

.result-modal{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.82);
backdrop-filter:blur(8px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:999;
}

.result-modal.show{
opacity:1;
visibility:visible;
}

.result-box{
width:420px;
max-width:90%;
background:#1f1a18;
border:2px solid #8b5e3c;
border-radius:20px;
padding:35px;
text-align:center;
animation:popup .35s;
}

.result-box h2{
color:#d8a56d;
margin-bottom:15px;
}

.result-box h3{
margin-bottom:20px;
}

.result-box p{
margin:12px 0;
font-size:18px;
}

.result-box span{
color:#d8a56d;
font-weight:700;
}

#play-again{
width:100%;
height:55px;
margin-top:20px;
border:none;
border-radius:12px;
background:#8b5e3c;
color:#fff;
font-size:18px;
cursor:pointer;
transition:.3s;
}

#play-again:hover{
background:#d8a56d;
}

#current-word.correct{
color:#4fd47a;
}

#current-word.wrong{
color:#ff5b5b;
}

#typing-input.correct{
border-color:#4fd47a;
}

#typing-input.wrong{
border-color:#ff5b5b;
}

@keyframes popup{
from{
transform:scale(.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

@keyframes shine{
0%{
left:-120%;
}
100%{
left:170%;
}
}

@media(max-width:1100px){

.main-layout{
grid-template-columns:1fr;
}

.left-panel{
order:2;
}

.right-panel{
order:1;
}

.frame{
max-width:700px;
}

}

@media(max-width:768px){

.game{
padding:12px;
}

.dashboard{
grid-template-columns:repeat(2,1fr);
}

#current-word{
font-size:34px;
}

#typing-input{
height:58px;
font-size:18px;
}

.controls{
flex-direction:column;
}

.controls button{
width:100%;
}

.logo{
font-size:30px;
}

}

@media(max-width:500px){

.dashboard{
grid-template-columns:1fr;
}

.frame{
max-width:100%;
}

}