html,body{
height:100%;
margin:0;
padding:0;
}

*{
box-sizing:border-box;
}

@font-face{
font-family:'f';
src:url("/fonts/f.ttf");
}

@font-face{
font-family:'u';
src:url("/fonts/u.otf");
}

@font-face{
font-family:'r';
src:url("/fonts/r.otf");
}

@font-face{
font-family:'japanese';
src:url("/fonts/japanese.ttf");
}

@font-face{
font-family:'korean';
src:url("/fonts/korean.ttf");
}

body{
font-family:f;
background:#0A0711;
display:flex;
justify-content:center;
align-items:flex-start;
min-height:100vh;
padding-top: 30px;
}

.container{
display:flex;
flex-direction:column;
align-items:center;
padding-bottom: 50px;
}

.logo{
background:white;
padding:10px 20px 10px 25px;
border-radius:6px;
display:flex;
justify-self:center;
margin-bottom:10px;
font-family:f;
font-size:75px;
font-weight: 600;
color: rgb(18, 13, 24); /*rgb(20, 15, 26) #100C17 #0A0711*/
}

.r {
  width: 75px;
  height: 75px;
}

/* TITLE */

.title, .title-ru, .title-chinese, .title-japanese, .title-korean {
text-align:center;
margin-bottom:20px;
color: white;
}

.title {
  font-family:f;
  font-size:26px;
}

.title-u {
  color: white;
  font-family:u;
  font-size:20px;
  margin-bottom:20px;
}

.title-ru {
  font-family: r;
  font-size: 23px;
}

.title-chinese {
  font-size: 21px;
}

.title-japanese {
  font-family: japanese;
  font-size: 22px;
}

.title-korean {
  font-family: korean;
  font-size: 15px;
  margin-top: 19px;
}

.g{
margin-left:-5px;
}

/* INFO BAR */

.game-ui{
display:grid;
grid-template-columns:1fr 1fr;
margin-bottom:10px;
gap:10px;
}

.score-box{
display:flex;
align-items:center;
gap:10px;
background:#120F1A; /*#0F0C15 #0E0B14*/
padding:10px 14px;
border-radius:6px;
color:white;
font-size:20px;
font-weight:500;
}

.computer-icon{
width:28px;
height:28px;
}

.sound-box{
display:flex;
justify-content:flex-end;
}

#soundBtn{
background:#120F1A; /*#0F0C15 #0E0B14*/
border:none;
color:white;
font-size:18px;
padding:10px 14px;
border-radius:6px;
cursor:pointer;
transition:0.15s;
}

/* GAME AREA */

#game{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

#gameCanvas{
border-radius:6px;
display:block;
}

/* OVERLAY */

/*
#overlay{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
}
*/

#overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
}

/* WINDOW */

.overlay-window{
background:rgba(0,0,0,0.7);
padding:40px 50px;
border-radius:10px;
text-align:center;
color:white;
min-width:260px;
}

/* OVERLAY TEXT */

#overlayTitle{
font-family:f;
font-size:30px;
margin-bottom:10px;
}

#overlayScore{
font-size:20px;
margin-bottom:20px;
opacity:0.9;
}

/* PLAY BUTTON */

#playBtn{
font-family:f;
font-size:22px;
padding:12px 35px;
border:none;
border-radius:6px;
cursor:pointer;
background:#fff;
color:#0A0711;
transition:0.15s;
}

#playBtn:hover{
transform:scale(0.9);
}

@media(max-width: 1000px) {
 body {
   padding-top:15px;
 }
 .logo {
    font-size: 60px;
    margin: 45px 0 6px 0;
 }
 .title {
   font-size: 24px;
 }
 .title-ru, .title-chinese {
   font-size: 21px;
 }
}

@media(max-width: 700px) {
 body {
   padding-top:10px;
 }
 .logo {
    font-size: 50px;
    margin: 30px 0 4px 0;
 }
 .title {
   font-size: 20px;
 }
 .title-ru, .title-chinese {
   font-size: 17px;
 }

.title-japanese {
  font-size: 18px;
  margin-top: 20px;
}

.title-u {
  font-size:17px;
  margin:15px 0;
}

.score-box{
font-weight:500;
}
.title-korean {
  font-size: 13px;
}
}

@media(max-width: 600px) {
#gameCanvas{
border-radius:3px;
}
.container{
padding-bottom: 0;
}
}