@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: #17153b;
   color: #fff;
}

.app {
   display: flex;
   min-height: 100vh;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
}

.game {
   display: flex;
   justify-content: center;
}

.game,
.windows {
   flex: 1;
}

.game-header {
   margin-bottom: 10px;
}

.game-balance {
   font-size: 20px;
   font-family: "Press Start 2P";
   color: #382b85
}

.balance {}


canvas {
   outline: 5px solid #221a50;
   box-shadow: 0px 0px 300px 0px #221a50;
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 65px;
   flex-wrap: wrap;
}

.header-main {
   flex: 1 1 200px
}

.header-logo {
   max-width: 160px;
}

.header-links {
   display: flex;
   gap: 20px;
   padding: 10px;
}

.header-link {
   font-size: 16px;
   color: #fff;
   font-family: "Montserrat";
   text-decoration: none;
   transition: 0.2s;
}

.header-link:hover {
   background: #fff;
   color: #000;
}

.keyboard {
   margin-top: 20px;
}

.keyboard-result {
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   min-height: 120px;
   align-items: center;
   padding: 20px;
   border: 10px solid #221a50;
}

.moveto {
   background: #382b84;
   padding: 15px;
   display: inline-block;
   color: #fff;
   cursor: pointer;
   font-family: "Press Start 2P";
   font-size: 20px;
   border-radius: 5px;
   position: relative;
}

.moveto-active {
   background: #533fc4;
}

.moveto-repeater {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: auto;
}

.moveto-close {
   width: 20px;
   cursor: pointer;
}

.moveto-count {
   background: transparent;
   border: 0;
   color: #fff;
   font-size: 20px;
   border-bottom: 1px solid #fff;
   font-family: "Montserrat";
   text-align: center;
   outline: 0;
}

.hidden {
   display: none;
}

.win-result {
   font-family: "Press Start 2P";
   font-size: 70px;
}

.next-lvl {
   font-family: "Montserrat";
   background: #382b84;
   padding: 15px 50px;
   color: #d7d0ff;
   font-size: 20px;
   font-weight: 600;
   border-top: 4px solid #513ebd;
   border-left: 4px solid #513ebd;
   border-right: 10px solid #221a50;
   border-bottom: 10px solid #221a50;
   margin: 20px 0;
   cursor: pointer;
}

.next-lvl:active {
   border-top: 4px solid #221a50;
   border-left: 4px solid #221a50;
   border-right: 10px solid #513ebd;
   border-bottom: 10px solid #513ebd;
}

.settings {
   margin-top: 50px;
   background: #382b84;
   padding: 50px 30px;
   border: 10px solid #221a50;
}

.settings-result {
   font-family: "Press Start 2P";
   font-size: 42px;
}

.setting {
   display: flex;
   gap: 20px;
   margin-top: 15px;
   align-items: center;
   flex-wrap: wrap;
}

.setting-title {
   font-family: "Montserrat";
   font-size: 20px;
   font-weight: 500;
}


.setting-range {
   appearance: none;
}

.setting-range::-webkit-slider-runnable-track {
   width: 100%;
   height: 5px;
   background: #fff;
}

.setting-range::-webkit-slider-thumb {
   appearance: none;
   width: 5px;
   height: 20px;
   background: #fff;
   margin-top: -7px;
}

.setting-result,
.setting-mapsize {
   font-family: "Montserrat";
   font-size: 20px;
   font-weight: 500;
   background: none;
   border: 0;
   outline: 0;
   color: #fff;
   padding: 5px;
   border-bottom: 1px solid #fff;
   width: 100px;
}

.setting-mapsize option {
   color: #000
}

.keyboard-buttons {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.keyboard-btn {
   background: #382b83;
   padding: 20px;
   border: 5px solid #221a50;
   color: #fff;
   font-family: "Montserrat";
   font-size: 20px;
   font-weight: 600;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: 0.5s;
}

.keyboard-btn:hover {
   opacity: 0.6;
}

.play {
   background: #2b8332;
   border: 5px solid #1a5026;
}

.repeat {
   background: #832b2b;
   border: 5px solid #501a1a;
   position: relative;
}