* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #121847;
    background-image: url('../assets/images/static/checkers.webp');
    font-family: sans-serif;
}

.unsupported {
    background: black;
    color: white;
    padding: 24px;
}

.unsupported a {
    color: #50b9eb;
}

.unsupported a:hover {
    color: #b483ef;
}

#game canvas {
    display: block;
    margin: 0 auto;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #474d9d; 
}

::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:vertical:hover {
    background: #9ba9eb; 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #283376; 
}

/* maps */

#maps {
    background: #121847;
    overflow-y: overlay;
    border-top: 4px solid black;
    font-size: 0;
    line-height: 0;
    padding-bottom: 16px;
}

.wrapper {
    max-width: 412px;
    margin: 0 auto;
    padding: 0 12px;
}

.map_collection_header {
    background: url('../assets/images/sprites/map_collection_header.webp') 0 -8px repeat-x;
    height: 8px;
    margin: 16px 0 6px;
    text-align: center;

}

.map_collection.unlocked .map_collection_header {
    background-position: 0 0;
}

.map_collection_name {
    display: inline-block;
    background: #121847;
    padding: 0 8px;
}

.map_collection_name .level {
    display: inline-block;
    height: 8px;
    width: 34px;
    background: url('../assets/images/sprites/map_collection_level.webp') 0 -8px no-repeat;
}

.map_collection.unlocked .map_collection_name .level {
    background-position: 0 0;
}

.map_collection_name .number {
    display: inline-block;
    height: 8px;
    width: 6px;
    margin-left: 1px;
    background: url('../assets/images/sprites/map_collection_numbers.webp') 0 8px no-repeat;
}

.map_collection_name div:nth-of-type(1n+2) {
    margin-left: 8px;
}

.map_collection_name .zero {  background-position: 0 -8px; }
.map_collection_name .one {   background-position: -7px -8px; }
.map_collection_name .two {   background-position: -14px -8px; }
.map_collection_name .three { background-position: -21px -8px; }
.map_collection_name .four {  background-position: -28px -8px; }
.map_collection_name .five {  background-position: -35px -8px; }
.map_collection_name .six {   background-position: -42px -8px; }
.map_collection_name .seven { background-position: -49px -8px; }
.map_collection_name .eight { background-position: -56px -8px; }
.map_collection_name .nine {  background-position: -63px -8px; }

.map_collection.unlocked .map_collection_name .zero {  background-position: 0 0; }
.map_collection.unlocked .map_collection_name .one {   background-position: -7px 0; }
.map_collection.unlocked .map_collection_name .two {   background-position: -14px 0; }
.map_collection.unlocked .map_collection_name .three { background-position: -21px 0; }
.map_collection.unlocked .map_collection_name .four {  background-position: -28px 0; }
.map_collection.unlocked .map_collection_name .five {  background-position: -35px 0; }
.map_collection.unlocked .map_collection_name .six {   background-position: -42px 0; }
.map_collection.unlocked .map_collection_name .seven { background-position: -49px 0; }
.map_collection.unlocked .map_collection_name .eight { background-position: -56px 0; }
.map_collection.unlocked .map_collection_name .nine {  background-position: -63px 0; }

.map_collection_name .the {
    display: inline-block;
    height: 8px;
    background: url('../assets/images/sprites/map_collection_level_names.png') 0 0 no-repeat;
}

.map_collection_name .the.mushrooms { width: 104px; background-position: 0 -8px; }
.map_collection_name .the.crates {    width: 83px;  background-position: 0 -24px; }
.map_collection_name .the.pots {      width: 69px;  background-position: 0 -40px; }
.map_collection_name .the.water {     width: 76px;  background-position: 0 -56px; }
.map_collection_name .the.blobs {     width: 76px;  background-position: 0 -72px; }
.map_collection_name .the.insane {    width: 83px;  background-position: 0 -88px; }

.map_collection.unlocked .map_collection_name .the.mushrooms { background-position: 0 0; }
.map_collection.unlocked .map_collection_name .the.crates {    background-position: 0 -16px; }
.map_collection.unlocked .map_collection_name .the.pots {      background-position: 0 -32px; }
.map_collection.unlocked .map_collection_name .the.water {     background-position: 0 -48px; }
.map_collection.unlocked .map_collection_name .the.blobs {     background-position: 0 -64px; }
.map_collection.unlocked .map_collection_name .the.insane {    background-position: 0 -80px; }

.map_row {
    padding-top: 2px;
    display: flex;
}

button.map {
    flex-basis: 56px;
    flex-grow: 1;
    background: #283376;
    padding: 2px;
    border: 0;
    margin-left: 2px;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

button.map:first-child {
    margin-left: 0;
}

button.map:focus {
    outline: 2px solid #fff;
}

button.map:hover {
    background: #474d9d;
}

.map_collection.unlocked button.map {
    background: #474d9d;
}

.map_collection.unlocked button.map:hover {
    background: #9ba9eb;
}

.map_id {
    margin: 10px 0 12px;
}

.map_id .number {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 1px;
    background: url('../assets/images/sprites/map_id_numbers.webp') 0 16px no-repeat;
}

.map_id div:first-of-type {
    margin-left: 0;
}

.map_id .zero {  background-position: 0 -16px; }
.map_id .one {   background-position: -8px -16px; }
.map_id .two {   background-position: -16px -16px; }
.map_id .three { background-position: -24px -16px; }
.map_id .four {  background-position: -32px -16px; }
.map_id .five {  background-position: -40px -16px; }
.map_id .six {   background-position: -48px -16px; }
.map_id .seven { background-position: -56px -16px; }
.map_id .eight { background-position: -64px -16px; }
.map_id .nine {  background-position: -72px -16px; }

.map_collection.unlocked .map_id .zero {  background-position: 0 0; }
.map_collection.unlocked .map_id .one {   background-position: -8px 0; }
.map_collection.unlocked .map_id .two {   background-position: -16px 0; }
.map_collection.unlocked .map_id .three { background-position: -24px 0; }
.map_collection.unlocked .map_id .four {  background-position: -32px 0; }
.map_collection.unlocked .map_id .five {  background-position: -40px 0; }
.map_collection.unlocked .map_id .six {   background-position: -48px 0; }
.map_collection.unlocked .map_id .seven { background-position: -56px 0; }
.map_collection.unlocked .map_id .eight { background-position: -64px 0; }
.map_collection.unlocked .map_id .nine {  background-position: -72px 0; }

.map_info {
    background: #121847;
    padding: 2px 4px 3px;
}

.map_info::after {
    width: 29px;
    height: 7px;
    background: url('../assets/images/sprites/map_info.webp') 0 0 no-repeat;
    content: '';
    display: inline-block;
}

.map_collection.unlocked .map_info {
    text-align: right;
}

.map_collection.unlocked .map_info::after {
    background-position: 0 7px;
}

.map_collection.unlocked .map_info.one::after {   background-position: -29px 0; }
.map_collection.unlocked .map_info.two::after {   background-position: -58px 0; }
.map_collection.unlocked .map_info.three::after { background-position: -87px 0; }
.map_collection.unlocked .map_info.four::after {  background-position: -116px 0; }
.map_collection.unlocked .map_info.five::after {  background-position: -145px 0; }