@font-face {
    font-family: "HexTank Font";
    src: url(662210707f41bc3cec83.woff2) format("woff2"),
        url(836734bd2c25101c75b6.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: "HexTank Font";
}

html,
body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -webkit-text-size-adjust: none;
    background-color: #FFA72D;
}

body::after {
    position: absolute;
    width: 0px;
    height: 0px;
    z-index: -1;
    content: url(9af90c6bd6c199d8357f.png) url(7ae9a5598cd65be13dac.png) url(303aff994ea487ed1bbb.png) url(151258ae6a1c0f4fd78b.png) url(26db771378cf203f9a8e.png);
    visibility: hidden;
}

#main-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#hextankgame {
    position: fixed;
    width: 100%;
    height: 100%;
}

#splash-screen {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

#loader-holder {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 50%;
}

#loader {
    position: relative;
    width: 24vmin;
    height: 24vmin;
}

.lds-default {
    display: inline-block;
    position: relative;
    width: 24vmin;
    height: 24vmin;
}

.lds-default div {
    position: absolute;
    width: 1.8vmin;
    height: 1.8vmin;
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
    background-color: #FFFFFF;
}

.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 11.1vmin;
    left: 19.8vmin;
}

.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 6.6vmin;
    left: 18.6vmin;
}

.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 3.3vmin;
    left: 15.6vmin;
}

.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 2.1vmin;
    left: 11.1vmin;
}

.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 3.3vmin;
    left: 6.6vmin;
}

.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 6.6vmin;
    left: 3.3vmin;
}

.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 11.1vmin;
    left: 2.1vmin;
}

.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 15.6vmin;
    left: 3.3vmin;
}

.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 18.6vmin;
    left: 6.6vmin;
}

.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 19.8vmin;
    left: 11.1vmin;
}

.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 18.6vmin;
    left: 15.6vmin;
}

.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 15.6vmin;
    left: 18.6vmin;
}

@keyframes lds-default {

    0%,
    20%,
    80%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}

#splash-screen-content-holder {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 50%;
}

#splash-screen-content {
    margin: 6vmin;
    text-align: center;
    font-size: 12vmin;
    word-break: break-word;
    color: #FFFFFF;
}

#home-ui {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.button-container,
.button-container-small {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.button-container,
.button {
    position: fixed;
    text-align: center;
    font-size: 7vmin;
    width: 25vmin;
    height: 8vmin;
    line-height: 8vmin;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    color: #000000;
    background-color: #FFFF00;
}

.button-container-small,
.button-small {
    position: fixed;
    text-align: center;
    font-size: 5.25vmin;
    width: 18.75vmin;
    height: 6vmin;
    line-height: 6vmin;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    color: #000000;
    background-color: #FFFF00;
}

.button-container {
    background-color: #000000;
}

.button-container-small {
    background-color: #000000;
}

.button {
    transform: scale(95%);
}

.button-small {
    transform: scale(95%);
}

.button:hover {
    background-color: #B0B000;
}

.button-small:hover {
    background-color: #B0B000;
}

#rooms-button-container {
    right: calc(100% - 18.75vmin - 5vmin);
    bottom: calc(100% - 6vmin - 5vmin);
}

.room-data-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 60vmin;
    left: calc(50% - 30vmin);
    margin-top: 1vmin;
    padding-bottom: 7vmin;
}

.room-data-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 60vmin;
    height: 3.2vmin;
    margin: 0.25vmin;
    border: 0.25vmin solid #000000;
    border-radius: 1vmin;
    background-color: #FFFF00;
}

.room-data-row-title {
    border: 0.25vmin solid #808080;
    background: repeating-linear-gradient(45deg, #F8F8F8, #F8F8F8 1vmin, #E0E0E0 1vmin, #E0E0E0 2vmin);
}

.room-data-select,
.room-data-key,
.room-data-players,
.room-data-ping {
    font-size: 2.8vmin;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 15vmin;
    height: 3.2vmin;
    margin: 0.25vmin;
    line-height: 3.2vmin;
}

.room-data-select {
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type=radio] {
    appearance: none;
    font-size: 2vmin;
    text-align: center;
    width: 2vmin;
    height: 2vmin;
    margin: 0.5vmin;
    padding: 0;
    line-height: 2vmin;
    border: 0.375vmin solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0.4vmin #000000;
    background-color: #FFFFFF;
}

input[type=radio]:checked {
    background-color: #000000;
}

#logo {
    position: fixed;
    width: 95vmin;
    height: 33vmin;
    left: calc(50% - 47.5vmin);
    bottom: calc(72% - 16.5vmin - 0.5vmin);
    background-image: url(7ae9a5598cd65be13dac.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#beta-button-container {
    position: absolute;
    font-size: 3.5vmin;
    width: 12.5vmin;
    height: 4vmin;
    line-height: 4vmin;
    left: calc(100% - 12.5vmin - 1.5vmin);
    top: calc(50% - 2vmin + 6.5vmin);
    background-color: #FFFFFF;
}

#beta-button {
    font-size: 3.5vmin;
    width: 12.5vmin;
    height: 4vmin;
    line-height: 4vmin;
    color: #FFFFFF;
    background-color: #0AC70A;
}

#io-button-container {
    position: absolute;
    font-size: 3.5vmin;
    width: 18vmin;
    height: 4vmin;
    line-height: 4vmin;
    left: calc(100% - 18vmin - 1.5vmin);
    top: calc(50% - 2vmin + 6.5vmin + 4vmin + 0.5vmin);
    background-color: #FFFFFF;
}

#io-button {
    font-size: 3.5vmin;
    width: 18vmin;
    height: 4vmin;
    line-height: 4vmin;
    color: #FFFFFF;
    background-color: #29B5E3;
}

#io-button:hover {
    background-color: #228bae;
}

#restart-text-container {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 95vmin;
    height: 33vmin;
    left: calc(50% - 47.5vmin);
    bottom: calc(72% - 16.5vmin - 0.5vmin);
}

#restart-text {
    font-size: 12vmin;
    text-shadow: 0.6vmin 0.6vmin 0vmin #000000, -0.6vmin -0.6vmin 0vmin #000000, -0.6vmin 0.6vmin 0vmin #000000, 0.6vmin -0.6vmin 0vmin #000000;
    color: #FFFFFF;
}

#form-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 60vmin;
    height: 12vmin;
    left: calc(50% - 30vmin);
    bottom: calc(42%);
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    background-color: #767676;
}

#input-field {
    position: fixed;
    text-align: center;
    font-size: 10vmin;
    width: 60vmin;
    height: 12vmin;
    line-height: 12vmin;
    outline: none;
    appearance: none;
    border: solid 0vmin;
    border-radius: 0vmin;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    transform: scale(95%);
    margin: 0vmin;
    padding: 0vmin;
    color: #000000;
    caret-color: #000000;
    background-color: #FFFFFF;
}

#input-field::selection {
    background-color: #FFFF00;
}

#input-field:focus::placeholder {
    color: #FFFFFF;
}

#pay-button-container {
    display: none;
    left: calc(50% - 39.5vmin - 1vmin);
    bottom: calc(42% - 8vmin - 1vmin);
}

#pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nimiq-logo {
    width: 7vmin;
    height: 7vmin;
    background-image: url(26db771378cf203f9a8e.png);
    background-size: 7vmin 7vmin;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 0.5vmin;
    margin-right: 0.5vmin;
}

#earn-button-container {
    display: none;
    width: 29vmin;
    bottom: calc(42% - 8vmin - 1vmin);
}

#earn-button {
    width: 29vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

#free-button-container {
    /* right: calc(50% - 39.5vmin - 1vmin); */
    bottom: calc(42% - 8vmin - 1vmin);
}

#twitter-button-container {
    width: 12vmin;
    height: 6vmin;
    right: calc(50% + 18.75vmin + 7.5vmin);
    top: calc(100% - 6vmin - 10vmin);
}

#twitter-button {
    width: 12vmin;
    height: 6vmin;
    background-image: url(303aff994ea487ed1bbb.png);
    background-size: 6.75vmin 5.55vmin;
    background-repeat: no-repeat;
    background-position: center center;
}

#help-button-container {
    right: calc(50% + 2.5vmin);
    top: calc(100% - 6vmin - 10vmin);
}

#terms-button-container {
    left: calc(50% + 2.5vmin);
    top: calc(100% - 6vmin - 10vmin);
}

#discord-button-container {
    width: 12vmin;
    height: 6vmin;
    left: calc(50% + 18.75vmin + 7.5vmin);
    top: calc(100% - 6vmin - 10vmin);
}

#discord-button {
    width: 12vmin;
    height: 6vmin;
    background-image: url(151258ae6a1c0f4fd78b.png);
    background-size: 7.5vmin 5.67vmin;
    background-repeat: no-repeat;
    background-position: center center;
}

.modal-shadow {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 999;
    filter: drop-shadow(0 0 3vmin #000000);
    background-color: rgba(0, 0, 0, 0.25);
}

.modal-container,
.modal-content {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
    clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
    background-color: #FFFF00;
}

.modal-container {
    background-color: #000000;
}

.modal-content {
    transform: scale(99%);
}

.modal-shadow:target {
    display: flex;
}

.close-button-container,
.close-button {
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    width: 5vmin;
    height: 5vmin;
    line-height: 5vmin;
    text-decoration: none;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    color: #000000;
    background-color: #FF0000;
}

.close-button-container {
    right: 0%;
    top: 0%;
    background-color: #000000;
}

.close-button {
    transform: scale(95%);
}

.close-button:hover {
    background-color: #BB0000;
}

a {
    cursor: default;
}

.text-content {
    position: absolute;
    width: calc(100% - 12vmin);
    height: calc(100% - 12vmin);
    bottom: calc(0% + 6vmin);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 0.25vmin solid #000000;
    border-radius: 1vmin;
    background-color: #FFFFFF;
}

.text-content::-webkit-scrollbar {
    display: none;
}

.text-category-container {
    margin-left: 3vmin;
    margin-right: 3vmin;
    margin-top: 6vmin;
    margin-bottom: 0vmin;

}

#contact-category-container {
    margin-bottom: 6vmin;

}

.text-category-title {
    font-size: 6vmin;
    text-align: center;
    word-break: break-word;
    text-shadow: 0.3vmin 0.3vmin 0vmin #000000, -0.3vmin -0.3vmin 0vmin #000000, -0.3vmin 0.3vmin 0vmin #000000, 0.3vmin -0.3vmin 0vmin #000000;
    color: #FFFF00;
}

.text-category-content {
    font-size: 3vmin;
    text-align: left;
    word-break: break-word;
    margin-top: 3vmin;
    text-indent: 3vmin;
    color: #000000;
}

#help-text-gamepad {
    margin-top: 1vmin;
    text-indent: 0vmin;
}

#help-text-keyboard,
#help-text-touch {
    margin-top: 1vmin;
    text-indent: 0vmin;
}

#contact-text-business {
    margin-top: 1vmin;
}

.text-question-container {
    margin-left: 0vmin;
    margin-right: 0vmin;
    margin-top: 0vmin;
    margin-bottom: 4.5vmin;
}

.text-question {
    font-size: 4.5vmin;
    text-align: left;
    word-break: break-word;
    text-shadow: 0.3vmin 0.3vmin 0vmin #000000, -0.3vmin -0.3vmin 0vmin #000000, -0.3vmin 0.3vmin 0vmin #000000, 0.3vmin -0.3vmin 0vmin #000000;
    color: #FFFF00;
}

.text-answer {
    font-size: 2.25vmin;
    text-align: left;
    word-break: break-word;
    color: #000000;
}

#version {
    position: fixed;
    text-align: center;
    font-size: 2.5vmin;
    width: 100vmin;
    height: 2.5vmin;
    line-height: 2.5vmin;
    top: calc(100% - 10vmin + 4vmin);
    opacity: 25%;
    color: #000000;
}

#in-game-ui {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#touch-buttons-container {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
}

#hud-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40vmin;
    height: 30vmin;
    right: calc(100% - 40vmin - 0.5vmin);
    bottom: calc(100% - 30vmin - 0.5vmin);
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

#hud-number-container,
#hud-name-container,
#hud-damage-container,
#hud-kills-container,
#hud-health-container,
#hud-room-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40vmin;
}

#hud-number-title,
#hud-number,
#hud-name-title,
#hud-name,
#hud-damage-title,
#hud-damage,
#hud-kills-title,
#hud-kills,
#hud-health-title,
#hud-health,
#hud-room-title,
#hud-room {
    font-size: 3.6vmin;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 4.5vmin;
    line-height: 4.5vmin;
    margin: 0.25vmin;
    text-shadow: 0.18vmin 0.18vmin 0vmin #000000, -0.18vmin -0.18vmin 0vmin #000000, -0.18vmin 0.18vmin 0vmin #000000, 0.18vmin -0.18vmin 0vmin #000000;
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
}

#hud-number-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-number {
    width: 27vmin;
}

#hud-name-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-name {
    width: 27vmin;
}

#hud-damage-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-damage {
    width: 27vmin;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 0, 0.75) 100%);
}

#hud-kills-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-kills {
    width: 27vmin;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 0, 0, 0.75) 100%);
}

#hud-health-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-health {
    width: 27vmin;
    background: linear-gradient(135deg, rgba(10, 199, 10, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(10, 199, 10, 0.75) 100%);
}

#hud-room-title {
    font-size: 2.8vmin;
    width: 13vmin;
}

#hud-room {
    width: 27vmin;
}

#leaderboard-container {
    position: fixed;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 50vmin;
    height: 40vmin;
    left: calc(100% - 50vmin - 6.9vmin - 1vmin);
    bottom: calc(100% - 40vmin - 0.5vmin);
}

.leaderboard-row {
    display: none;
    align-items: center;
    justify-content: space-evenly;
    width: 49.5vmin;
    height: 3.2vmin;
    margin: 0.25vmin;
    clip-path: polygon(4% 0, 100% 0, 100% 50%, 96% 100%, 0 100%, 0% 50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
}

#leaderboard-title {
    display: flex;
}

#leaderboard-gold {
    background: linear-gradient(135deg, #BF9A47 0%, #FFE233 25%, #FEFDE1 50%, #FFE233 75%, #BF9A47 100%);
}

#leaderboard-silver {
    background: linear-gradient(135deg, #787878 0%, #B5B5B5 25%, #FFFFFF 50%, #E3E3E3 75%, #787878 100%);
}

#leaderboard-bronze {
    background: linear-gradient(135deg, #844414 0%, #CF7D52 25%, #FCD5BE 50%, #CF7D52 75%, #844414 100%);
}

.leaderboard-number,
.leaderboard-name,
.leaderboard-damage,
.leaderboard-kills {
    font-size: 2.8vmin;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 3.2vmin;
    line-height: 3.2vmin;
    text-shadow: 0.14vmin 0.14vmin 0vmin #000000, -0.14vmin -0.14vmin 0vmin #000000, -0.14vmin 0.14vmin 0vmin #000000, 0.14vmin -0.14vmin 0vmin #000000;
    color: #FFFFFF;
}

.leaderboard-number {
    width: 15%;
}

.leaderboard-name {
    width: 28%;
}

.leaderboard-damage {
    width: 28%;
}

.leaderboard-kills {
    width: 28%;
}

#fullscreen-button-container {
    position: fixed;
    width: 6.9vmin;
    height: 6.9vmin;
    left: calc(100% - 6.9vmin - 0.75vmin);
    bottom: calc(100% - 6.9vmin - 0.75vmin);
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 0, 0.5) 100%);
}

#fullscreen-button {
    width: 6.9vmin;
    height: 6.9vmin;
    background-image: url(9af90c6bd6c199d8357f.png);
    background-size: 5.52vmin 5.52vmin;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgba(255, 255, 255, 0);
}

#fullscreen-button-container:hover {
    background: linear-gradient(135deg, rgba(176, 176, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(176, 176, 0, 0.5) 100%);
}