@import url('https://fonts.googleapis.com/css?family=Anton');

input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

html {
    height: 100%;
    font-size: 0;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    background: #272B30 url('/background.png') repeat;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

table, th, td {
    border: none;
    border-collapse: collapse;
    padding: 0;
}

body.lobbying #lobby {
    display: block;
}

body.playing {
    overflow: hidden;
}

body.playing #title {
    height: 50px;
}

body.playing #game {
    display: block;
}

#title {
    display: block;
    height: 137px;
    margin: 40px auto 20px;
    transition: height 200ms;
}

#main {
    flex: 1;
    position: relative;
}

#lobby {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 700px;
    height: 90%;
    max-height: 494px;
    transform: translate(-50%, -50%);
}

#lobby > .tab {
    display: inline-block;
}

#lobby > .tab > .input {
    display: none;
}

#lobby > .tab > .label {
    display: inline-block;
    height: 28px;
    margin: 0 2px;
    padding: 0 16px;
    font: 16px 'Anton';
    line-height: 28px;
    letter-spacing: 2px;
    border-radius: 3px 3px 0 0;
    vertical-align: middle;
    cursor: pointer;
    transform: translate(14px, -21px) skewX(-15deg);
    transition: transform 125ms;
}

#lobby > .tab > .label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

#lobby > .tab > .label:hover {
    transform: translate(15px, -24px) skewX(-15deg);
}

#lobby > .tab > .input:checked + .label {
    transform: translate(16px, -28px) skewX(-15deg);
}

#lobby > .tab > .input:disabled + .label {
    cursor: not-allowed;
}

#lobby > .tab > .input:not(:checked) ~ .content {
    display: none;
}

#lobby > .tab > .content {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #131313;
    border: 3px solid #555;
    border-radius: 6px;
    overflow-y: auto;
    z-index: 1;
}

#lobby > .games > .label {
    background-color: #FF1E19;
}

#lobby > .games > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0gNDMuOTA2MjUgMC45Njg3NSBDIDQzLjg2MzI4MSAwLjk3NjU2MyA0My44MjAzMTMgMC45ODgyODEgNDMuNzgxMjUgMSBDIDQzLjMxNjQwNiAxLjEwNTQ2OSA0Mi45ODgyODEgMS41MjM0MzggNDMgMiBDIDQzIDMuODk4NDM4IDQyLjEyMTA5NCA0Ljk0MTQwNiA0MC41IDUuOTY4NzUgQyAzOC44Nzg5MDYgNi45OTYwOTQgMzYuNTM1MTU2IDcuODI4MTI1IDM0LjEyNSA4Ljg0Mzc1IEMgMzEuNzE0ODQ0IDkuODU5Mzc1IDI5LjIxODc1IDExLjA4MjAzMSAyNy4yODEyNSAxMy4xMjUgQyAyNS41MTk1MzEgMTQuOTg0Mzc1IDI0LjI5Njg3NSAxNy41MzkwNjMgMjQuMDkzNzUgMjAuOTY4NzUgQyAyMi4yOTI5NjkgMjAuODIwMzEzIDIxLjE3MTg3NSAyMC4yNDIxODggMTkuOTY4NzUgMTkuNjI1IEMgMTguNSAxOC44NzEwOTQgMTYuODIwMzEzIDE4IDE0IDE4IEMgNy45ODA0NjkgMTggMCAzMS42ODM1OTQgMCA0MiBDIDAgNDYuNzEwOTM4IDIuNDY4NzUgNTAgNiA1MCBDIDExLjMwNDY4OCA1MCAxNC45MDYyNSA0Ny4xMjEwOTQgMTguMDkzNzUgNDQuNTkzNzUgQyAyMC41MzEyNSA0Mi42NjAxNTYgMjIuNjUyMzQ0IDQxIDI1IDQxIEMgMjcuMzQ3NjU2IDQxIDI5LjQ2ODc1IDQyLjY2MDE1NiAzMS45MDYyNSA0NC41OTM3NSBDIDM1LjA5Mzc1IDQ3LjEyMTA5NCAzOC42OTUzMTMgNTAgNDQgNTAgQyA0Ny41MzEyNSA1MCA1MCA0Ni43MTA5MzggNTAgNDIgQyA1MCAzMS42ODM1OTQgNDIuMDE5NTMxIDE4IDM2IDE4IEMgMzMuMTc5Njg4IDE4IDMxLjUgMTguODcxMDk0IDMwLjAzMTI1IDE5LjYyNSBDIDI4Ljg3ODkwNiAyMC4yMTg3NSAyNy43OTY4NzUgMjAuNzYxNzE5IDI2LjEyNSAyMC45Mzc1IEMgMjYuMzIwMzEzIDE3Ljk5NjA5NCAyNy4zMDA3ODEgMTYuMDI3MzQ0IDI4Ljc1IDE0LjUgQyAzMC4zNjcxODggMTIuNzkyOTY5IDMyLjU3ODEyNSAxMS42NDA2MjUgMzQuOTA2MjUgMTAuNjU2MjUgQyAzNy4yMzQzNzUgOS42NzE4NzUgMzkuNjI4OTA2IDguODc4OTA2IDQxLjU2MjUgNy42NTYyNSBDIDQzLjQ5NjA5NCA2LjQzMzU5NCA0NSA0LjYwMTU2MyA0NSAyIEMgNDUuMDExNzE5IDEuNzEwOTM4IDQ0Ljg5NDUzMSAxLjQzMzU5NCA0NC42ODc1IDEuMjM4MjgxIEMgNDQuNDc2NTYzIDEuMDM5MDYzIDQ0LjE5MTQwNiAwLjk0MTQwNiA0My45MDYyNSAwLjk2ODc1IFogTSAzNyAyNyBDIDM4LjEwNTQ2OSAyNyAzOSAyNy44OTQ1MzEgMzkgMjkgQyAzOSAzMC4xMDU0NjkgMzguMTA1NDY5IDMxIDM3IDMxIEMgMzUuODk0NTMxIDMxIDM1IDMwLjEwNTQ2OSAzNSAyOSBDIDM1IDI3Ljg5NDUzMSAzNS44OTQ1MzEgMjcgMzcgMjcgWiBNIDEyIDI4IEwgMTUgMjggTCAxNSAzMSBMIDE4IDMxIEwgMTggMzQgTCAxNSAzNCBMIDE1IDM3IEwgMTIgMzcgTCAxMiAzNCBMIDkgMzQgTCA5IDMxIEwgMTIgMzEgWiBNIDMzIDMxIEMgMzQuMTA1NDY5IDMxIDM1IDMxLjg5NDUzMSAzNSAzMyBDIDM1IDM0LjEwNTQ2OSAzNC4xMDU0NjkgMzUgMzMgMzUgQyAzMS44OTQ1MzEgMzUgMzEgMzQuMTA1NDY5IDMxIDMzIEMgMzEgMzEuODk0NTMxIDMxLjg5NDUzMSAzMSAzMyAzMSBaIE0gNDEgMzEgQyA0Mi4xMDU0NjkgMzEgNDMgMzEuODk0NTMxIDQzIDMzIEMgNDMgMzQuMTA1NDY5IDQyLjEwNTQ2OSAzNSA0MSAzNSBDIDM5Ljg5NDUzMSAzNSAzOSAzNC4xMDU0NjkgMzkgMzMgQyAzOSAzMS44OTQ1MzEgMzkuODk0NTMxIDMxIDQxIDMxIFogTSAzNyAzNSBDIDM4LjEwNTQ2OSAzNSAzOSAzNS44OTQ1MzEgMzkgMzcgQyAzOSAzOC4xMDU0NjkgMzguMTA1NDY5IDM5IDM3IDM5IEMgMzUuODk0NTMxIDM5IDM1IDM4LjEwNTQ2OSAzNSAzNyBDIDM1IDM1Ljg5NDUzMSAzNS44OTQ1MzEgMzUgMzcgMzUgWiI+PC9wYXRoPjwvc3ZnPg==);
    transform: translateY(-3px);
}

#lobby > .create > .label {
    background-color: green;
}

#lobby > .create > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0id2hpdGUiPiAgICA8cGF0aCBkPSJNIDI4LjIzMjQyMiAyIEMgMjcuNzc5OTIyIDIgMjcuMzI3NDIyIDIuMTcyNTc4MSAyNi45ODI0MjIgMi41MTc1NzgxIEwgMjYuNDU3MDMxIDMuMDQyOTY4OCBMIDI4Ljk1NzAzMSA1LjU0Mjk2ODggTCAyOS40ODI0MjIgNS4wMTc1NzgxIEMgMzAuMTcyNDIyIDQuMzI3NTc4MSAzMC4xNzI0MjIgMy4yMDc1NzgxIDI5LjQ4MjQyMiAyLjUxNzU3ODEgQyAyOS4xMzc0MjIgMi4xNzI1NzgxIDI4LjY4NDkyMiAyIDI4LjIzMjQyMiAyIHogTSA2IDQgQyA0Ljg5NSA0IDQgNC44OTUgNCA2IEwgNCAyNCBDIDQgMjUuMTA1IDQuODk1IDI2IDYgMjYgTCAyNCAyNiBDIDI1LjEwNSAyNiAyNiAyNS4xMDUgMjYgMjQgTCAyNiAxMS4zMjgxMjUgTCAyNCAxMy4zMjgxMjUgTCAyNCAyNCBMIDYgMjQgTCA2IDEwIEwgMTYuNjcxODc1IDEwIEwgMjIuNjcxODc1IDQgTCA2IDQgeiBNIDI1LjA0Mjk2OSA0LjQ1NzAzMTIgTCAxNC40NzQ2MDkgMTUuMDI1MzkxIEwgMTQgMTggTCAxNi45NzQ2MDkgMTcuNTI1MzkxIEwgMjcuNTQyOTY5IDYuOTU3MDMxMiBMIDI1LjA0Mjk2OSA0LjQ1NzAzMTIgeiI+PC9wYXRoPjwvc3ZnPg==);
    transform: translateY(-1px);
}

#lobby > .rules > .label {
    background-color: purple;
}

#lobby > .rules > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0id2hpdGUiPiAgICA8cGF0aCBkPSJNMTUsM0M4LjM3MywzLDMsOC4zNzMsMywxNWMwLDYuNjI3LDUuMzczLDEyLDEyLDEyczEyLTUuMzczLDEyLTEyQzI3LDguMzczLDIxLjYyNywzLDE1LDN6IE0xNSwyMi41IGMtMC44MjgsMC0xLjUtMC42NzItMS41LTEuNXMwLjY3Mi0xLjUsMS41LTEuNXMxLjUsMC42NzIsMS41LDEuNVMxNS44MjgsMjIuNSwxNSwyMi41eiBNMTcuMDY4LDE1LjVDMTYuNDA2LDE2LjExMSwxNiwxNi41MTIsMTYsMTcgaC0yYzAtMS4zODksMC45NDktMi4yNjUsMS43MTEtMi45N0MxNi41MSwxMy4yOTIsMTcsMTIuNzk5LDE3LDEyYzAtMS4xMDMtMC44OTctMi0yLTJzLTIsMC44OTctMiwyaC0yYzAtMi4yMDYsMS43OTQtNCw0LTQgczQsMS43OTQsNCw0QzE5LDEzLjcxNSwxNy45MjksMTQuNzA0LDE3LjA2OCwxNS41eiI+PC9wYXRoPjwvc3ZnPg==);
    transform: translateY(-1px);
}

#lobby > .games > .content {
    padding: 8px;
}

#lobby > .games > .content:empty {
    cursor: pointer;
}

#lobby > .games > .content:empty::before {
    content: 'Create a game to begin...';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-underline-offset: 3px;
    text-decoration-color: darkgray;
    opacity: 0.2;
    color: darkgray;
    transform: translate(-50%, -50%);
}

#lobby > .games > .content:empty:hover::before {
    text-decoration: underline;
}

#lobby > .games > .content > .game {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    padding: 8px;
    font-size: 16px;
    background-color: #272B30;
    border-radius: 3px;
    cursor: pointer;
    transition: opacity 250ms;
}

#lobby > .games > .content > .game:hover {
    background-color: #383e44;
}

#lobby > .games > .content > .game > .name {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
}

#lobby > .games > .content > .game > .separator {
    width: 1px;
    margin: 4px 10px;
    background-color: white;
}

#lobby > .games > .content > .game > .icon::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-2px);
}

#lobby > .games > .content > .game > .size::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IndoaXRlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDQ4QzAsMjEuNSwyMS41LDAsNDgsMGg0MTZjMjYuNSwwLDQ4LDIxLjUsNDgsNDh2NDE2YzAsMjYuNS0yMS41LDQ4LTQ4LDQ4SDQ4Yy0yNi41LDAtNDgtMjEuNS00OC00OFY0OHoKCQkgTTQ4LDMyYy04LjgsMC0xNiw3LjItMTYsMTZ2MTEyaDEyOFYzMkg0OHogTTE2MCwxOTJIMzJ2MTI4aDEyOFYxOTJ6IE0xOTIsMzIwVjE5MmgxMjh2MTI4SDE5MnogTTE2MCwzNTJIMzJ2MTEyCgkJYzAsOC44LDcuMiwxNiwxNiwxNmgxMTJWMzUyeiBNMTkyLDM1MmgxMjh2MTI4SDE5MlYzNTJ6IE0zNTIsMzUydjEyOGgxMTJjOC44LDAsMTYtNy4yLDE2LTE2VjM1MkgzNTJ6IE0zNTIsMzIwaDEyOFYxOTJIMzUyVjMyMHoKCQkgTTM1MiwxNjBoMTI4VjQ4YzAtOC44LTcuMi0xNi0xNi0xNkgzNTJWMTYweiBNMzIwLDE2MEgxOTJWMzJoMTI4VjE2MHoiLz4KPC9nPgo8L3N2Zz4=);
    transform: scale(0.9) translateY(-2px);
}

#lobby > .games > .content > .game > .speed::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05Ljk5MTIxIDE4Ljc0MjJDMTQuOTc0NiAxOC43NDIyIDE5LjA4NzkgMTQuNjI4OSAxOS4wODc5IDkuNjU0M0MxOS4wODc5IDQuNjc5NjkgMTQuOTY1OCAwLjU2NjQwNiA5Ljk4MjQyIDAuNTY2NDA2QzUuMDA3ODEgMC41NjY0MDYgMC45MDMzMiA0LjY3OTY5IDAuOTAzMzIgOS42NTQzQzAuOTAzMzIgMTQuNjI4OSA1LjAxNjYgMTguNzQyMiA5Ljk5MTIxIDE4Ljc0MjJaTTkuOTkxMjEgMTYuOTMxNkM1Ljk1NzAzIDE2LjkzMTYgMi43MzE0NSAxMy42ODg1IDIuNzMxNDUgOS42NTQzQzIuNzMxNDUgNS42MjAxMiA1Ljk1NzAzIDIuMzg1NzQgOS45ODI0MiAyLjM4NTc0QzE0LjAxNjYgMi4zODU3NCAxNy4yNTk4IDUuNjIwMTIgMTcuMjY4NiA5LjY1NDNDMTcuMjc3MyAxMy42ODg1IDE0LjAyNTQgMTYuOTMxNiA5Ljk5MTIxIDE2LjkzMTZaTTkuOTgyNDIgNS41ODQ5NkMxMC40NzQ2IDUuNTg0OTYgMTAuODg3NyA1LjE3MTg4IDEwLjg4NzcgNC42Nzk2OUMxMC44ODc3IDQuMTc4NzEgMTAuNDc0NiAzLjc3NDQxIDkuOTgyNDIgMy43NzQ0MUM5LjQ4MTQ1IDMuNzc0NDEgOS4wODU5NCA0LjE3ODcxIDkuMDg1OTQgNC42Nzk2OUM5LjA4NTk0IDUuMTcxODggOS40OTAyMyA1LjU4NDk2IDkuOTgyNDIgNS41ODQ5NlpNNi41MTA3NCA3LjExNDI2QzcuMDExNzIgNy4xMTQyNiA3LjQxNjAyIDYuNzAxMTcgNy40MTYwMiA2LjIwODk4QzcuNDE2MDIgNS43MTY4IDcuMDExNzIgNS4zMDM3MSA2LjUxMDc0IDUuMzAzNzFDNi4wMTg1NSA1LjMwMzcxIDUuNjA1NDcgNS43MTY4IDUuNjA1NDcgNi4yMDg5OEM1LjYwNTQ3IDYuNzAxMTcgNi4wMTg1NSA3LjExNDI2IDYuNTEwNzQgNy4xMTQyNlpNOC42MDI1NCAxMS4wMzQyQzkuMzQ5NjEgMTEuNzYzNyAxMC4zNzc5IDExLjU5NjcgMTAuOTc1NiAxMC43MzU0TDE0LjIwMTIgNi4xNTYyNUMxNC41NjE1IDUuNjI4OTEgMTQuMDM0MiA1LjExMDM1IDEzLjUxNTYgNS40NjE5MUw4Ljg5MjU4IDguNjUyMzRDOC4wMzEyNSA5LjI0MTIxIDcuODczMDUgMTAuMjc4MyA4LjYwMjU0IDExLjAzNDJaTTUuMDUxNzYgMTAuNTU5NkM1LjU1MjczIDEwLjU1OTYgNS45NTcwMyAxMC4xNDY1IDUuOTU3MDMgOS42NTQzQzUuOTU3MDMgOS4xNTMzMiA1LjU1MjczIDguNzQ5MDIgNS4wNTE3NiA4Ljc0OTAyQzQuNTU5NTcgOC43NDkwMiA0LjE0NjQ4IDkuMTUzMzIgNC4xNDY0OCA5LjY1NDNDNC4xNDY0OCAxMC4xNDY1IDQuNTU5NTcgMTAuNTU5NiA1LjA1MTc2IDEwLjU1OTZaTTE0LjkyMTkgMTAuNTU5NkMxNS40MTQxIDEwLjU1OTYgMTUuODI3MSAxMC4xNDY1IDE1LjgyNzEgOS42NTQzQzE1LjgyNzEgOS4xNTMzMiAxNS40MTQxIDguNzQ5MDIgMTQuOTIxOSA4Ljc0OTAyQzE0LjQyMDkgOC43NDkwMiAxNC4wMTY2IDkuMTUzMzIgMTQuMDE2NiA5LjY1NDNDMTQuMDE2NiAxMC4xNDY1IDE0LjQyMDkgMTAuNTU5NiAxNC45MjE5IDEwLjU1OTZaTTYuNTI4MzIgMTQuMDA0OUM3LjAyOTMgMTQuMDA0OSA3LjQzMzU5IDEzLjU5MTggNy40MzM1OSAxMy4wOTk2QzcuNDMzNTkgMTIuNTk4NiA3LjAyOTMgMTIuMTk0MyA2LjUyODMyIDEyLjE5NDNDNi4wMzYxMyAxMi4xOTQzIDUuNjIzMDUgMTIuNTk4NiA1LjYyMzA1IDEzLjA5OTZDNS42MjMwNSAxMy41OTE4IDYuMDM2MTMgMTQuMDA0OSA2LjUyODMyIDE0LjAwNDlaTTEzLjQ0NTMgMTQuMDA0OUMxMy45Mzc1IDE0LjAwNDkgMTQuMzUwNiAxMy41OTE4IDE0LjM1MDYgMTMuMDk5NkMxNC4zNTA2IDEyLjU5ODYgMTMuOTM3NSAxMi4xOTQzIDEzLjQ0NTMgMTIuMTk0M0MxMi45NDQzIDEyLjE5NDMgMTIuNTQgMTIuNTk4NiAxMi41NCAxMy4wOTk2QzEyLjU0IDEzLjU5MTggMTIuOTQ0MyAxNC4wMDQ5IDEzLjQ0NTMgMTQuMDA0OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
}

#lobby > .games > .content > .game > .players::after {
    width: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzMgMjMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNS4yMzU0IDIyLjI3NzdIMjkuODQ2NkMzMS44NzMzIDIyLjI3NzcgMzIuODQ3NSAyMS42NDMyIDMyLjg0NzUgMjAuMjY3N0MzMi44NDc1IDE3LjA2MDMgMjguODM1OCAxMi43NTM4IDIyLjU0IDEyLjc1MzhDMTYuMjU1OSAxMi43NTM4IDEyLjI0NDEgMTcuMDYwMyAxMi4yNDQxIDIwLjI2NzdDMTIuMjQ0MSAyMS42NDMyIDEzLjIxODQgMjIuMjc3NyAxNS4yMzU0IDIyLjI3NzdaTTE0Ljg0NTkgMjAuMjUyOUMxNC41Njg2IDIwLjI1MjkgMTQuNDY2MiAyMC4xNjg4IDE0LjQ2NjIgMTkuOTUwMUMxNC40NjYyIDE4LjE1NDggMTcuMzY4OSAxNC43Nzg2IDIyLjU0IDE0Ljc3ODZDMjcuNzIyNyAxNC43Nzg2IDMwLjYyNTUgMTguMTU0OCAzMC42MjU1IDE5Ljk1MDFDMzAuNjI1NSAyMC4xNjg4IDMwLjUxMzQgMjAuMjUyOSAzMC4yMzYyIDIwLjI1MjlIMTQuODQ1OVpNMjIuNTQ5NiAxMS4zODcyQzI1LjM4MjkgMTEuMzg3MiAyNy42Nzc1IDguODgzOCAyNy42Nzc1IDUuODE4MTdDMjcuNjc3NSAyLjc5Mjg2IDI1LjM4NDEgMC4zOTA5OTEgMjIuNTQ5NiAwLjM5MDk5MUMxOS43MjY4IDAuMzkwOTkxIDE3LjQxMjEgMi44MzEzIDE3LjQyMzggNS44Mzk1QzE3LjQzNTUgOC44OTM0IDE5LjcxODMgMTEuMzg3MiAyMi41NDk2IDExLjM4NzJaTTIyLjU0OTYgOS4zNjI0QzIwLjkyOTMgOS4zNjI0IDE5LjU0NjggNy44MTQ1OCAxOS41NDY4IDUuODM1MjhDMTkuNTM1IDMuOTEwMTIgMjAuOTA2OCAyLjQxNTc0IDIyLjU0OTYgMi40MTU3NEMyNC4xOTY1IDIuNDE1NzQgMjUuNTU0NSAzLjg5MDkgMjUuNTU0NSA1LjgxODE3QzI1LjU1NDUgNy43OTMyNSAyNC4xODM2IDkuMzYyNCAyMi41NDk2IDkuMzYyNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yLjUxMTc5IDIyLjI3OTdIMTEuNjIwM0MxMC45ODQgMjEuOTA4NCAxMC41NTc5IDIxLjA3MDMgMTAuNjQ2MyAyMC4yOTIySDIuMzkyOTZDMi4xNjM3NCAyMC4yOTIyIDIuMDczMDMgMjAuMTk4NCAyLjA3MzAzIDIwLjAwMTFDMi4wNzMwMyAxNy4yOTk0IDUuMjM3NTcgMTQuNzE5OSA4Ljk2NDE0IDE0LjcxOTlDMTAuMjc3MSAxNC43MTk5IDExLjYwMDQgMTUuMDQ4MyAxMi42MjUzIDE1LjYyMTNDMTMuMDA3NiAxNS4wNTk4IDEzLjQ5NiAxNC41NzU4IDE0LjEzMDkgMTQuMTU5OEMxMi42NDY2IDEzLjIzNTQgMTAuNzk2NSAxMi43MzY2IDguOTY0MTQgMTIuNzM2NkM0LjAxMzkxIDEyLjczNjYgMCAxNi4yODAyIDAgMjAuMTgwNEMwIDIxLjU2OTggMC44MzkwNjEgMjIuMjc5NyAyLjUxMTc5IDIyLjI3OTdaTTguOTczNzUgMTEuNTA2MkMxMS40MzIxIDExLjUwNjIgMTMuNDM1OCA5LjMxNzEzIDEzLjQzNTggNi42MTkwMUMxMy40MzU4IDMuOTg3OTIgMTEuNDQwOCAxLjg1MjI5IDguOTczNzUgMS44NTIyOUM2LjUyMTcyIDEuODUyMjkgNC40OTc4OSA0LjAxODg2IDQuNTA5NjEgNi42NDAzNEM0LjUxMTcyIDkuMzMwOTYgNi41MTUzOSAxMS41MDYyIDguOTczNzUgMTEuNTA2MlpNOC45NzM3NSA5LjUxMTIxQzcuNjMxNDggOS41MTEyMSA2LjUwNjcxIDguMjMyOTIgNi41MDY3MSA2LjY0MDM0QzYuNTAyNDkgNS4wOTM0NiA3LjYyNjA5IDMuODQ5MzkgOC45NzM3NSAzLjg0OTM5QzEwLjMzODUgMy44NDkzOSAxMS40NTA0IDUuMDc0MjQgMTEuNDUwNCA2LjYxOTAxQzExLjQ1MDQgOC4yMzI5MiAxMC4zMTgxIDkuNTExMjEgOC45NzM3NSA5LjUxMTIxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
}

#lobby > .games > .content > .game > .join {
    width: 18px;
    height: 18px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05Ljk5MTIxIDE4Ljc0MjJDMTQuOTc0NiAxOC43NDIyIDE5LjA4NzkgMTQuNjI4OSAxOS4wODc5IDkuNjU0M0MxOS4wODc5IDQuNjc5NjkgMTQuOTY1OCAwLjU2NjQwNiA5Ljk4MjQyIDAuNTY2NDA2QzUuMDA3ODEgMC41NjY0MDYgMC45MDMzMiA0LjY3OTY5IDAuOTAzMzIgOS42NTQzQzAuOTAzMzIgMTQuNjI4OSA1LjAxNjYgMTguNzQyMiA5Ljk5MTIxIDE4Ljc0MjJaTTkuOTkxMjEgMTYuOTMxNkM1Ljk1NzAzIDE2LjkzMTYgMi43MzE0NSAxMy42ODg1IDIuNzMxNDUgOS42NTQzQzIuNzMxNDUgNS42MjAxMiA1Ljk1NzAzIDIuMzg1NzQgOS45ODI0MiAyLjM4NTc0QzE0LjAxNjYgMi4zODU3NCAxNy4yNTk4IDUuNjIwMTIgMTcuMjY4NiA5LjY1NDNDMTcuMjc3MyAxMy42ODg1IDE0LjAyNTQgMTYuOTMxNiA5Ljk5MTIxIDE2LjkzMTZaTTE0LjUyNjQgOS42NTQzQzE0LjUyNjQgOS40MTY5OSAxNC40Mzg1IDkuMjIzNjMgMTQuMjM2MyA5LjAzMDI3TDExLjI0OCA2LjA4NTk0QzExLjEwNzQgNS45NDUzMSAxMC45MzE2IDUuODc1IDEwLjcyMDcgNS44NzVDMTAuMzA3NiA1Ljg3NSAxMC4wMDg4IDYuMTgyNjIgMTAuMDA4OCA2LjU5NTdDMTAuMDA4OCA2LjgxNTQzIDEwLjEwNTUgNyAxMC4yMzczIDcuMTMxODRMMTEuMzAwOCA4LjE1MTM3TDEyLjI4NTIgOC45NTExN0wxMC40OTIyIDguODYzMjhINi4yMDMxMkM1Ljc1NDg4IDguODYzMjggNS40Mzg0OCA5LjE5NzI3IDUuNDM4NDggOS42NTQzQzUuNDM4NDggMTAuMTAyNSA1Ljc1NDg4IDEwLjQ0NTMgNi4yMDMxMiAxMC40NDUzSDEwLjQ5MjJMMTIuMjkzOSAxMC4zNjYyTDExLjMwOTYgMTEuMTU3MkwxMC4yMzczIDEyLjE3NjhDMTAuMDg3OSAxMi4zMDg2IDEwLjAwODggMTIuNDkzMiAxMC4wMDg4IDEyLjcxMjlDMTAuMDA4OCAxMy4xMjYgMTAuMzA3NiAxMy40NDI0IDEwLjcyMDcgMTMuNDQyNEMxMC45MzE2IDEzLjQ0MjQgMTEuMTA3NCAxMy4zNjMzIDExLjI0OCAxMy4yMjI3TDE0LjIzNjMgMTAuMjg3MUMxNC40Mjk3IDEwLjA5MzggMTQuNTI2NCA5LjkwMDM5IDE0LjUyNjQgOS42NTQzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#lobby > .create > .content {
    padding: 12px;
    line-height: 1;
}

#lobby > .create > .content > .settings > .section:nth-last-child(n+2) {
    margin-bottom: 16px;
}

#lobby > .create > .content > .settings > .section > .title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: bold;
}

#lobby > .create > .content > .settings > .section > .spacing {
    margin-top: 12px;
}

#lobby > .create > .content > .settings .input.hidden {
    display: none !important;
}

#lobby > .create > .content > .settings .input > .label {
    margin-bottom: 2px;
    font-size: 12px;
    color: lightgray;
}

#lobby > .create > .content > .settings .input > input:valid {
    border-color: green !important;
}

#lobby > .create > .content > .settings .input.text > input {
    width: 100%;
    padding: 8px 12px;
    background-color: #272B30;
    color: white;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 12px;
}

#lobby > .create > .content > .settings .input.number {
    display: inline-block;
    margin: 0 16px 4px 0;
}

#lobby > .create > .content > .settings .input.number > .label {
    font-weight: bold;
}

#lobby > .create > .content > .settings .input.number > .label[title] {
    cursor: help;
}

#lobby > .create > .content > .settings .input.number > input {
    width: 140px;
    padding: 8px 12px;
    background-color: #272B30;
    color: white;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 12px;
}

#lobby > .create > .content > .settings .input.checkbox {
    display: inline-block;
    margin: 0 20px 8px 0;
}

#lobby > .create > .content > .settings .input.checkbox > .label {
    display: inline-block;
    cursor: pointer;
}

#lobby > .create > .content > .settings .input.checkbox > input {
    margin-right: 6px;
    cursor: pointer;
}

#lobby > .create > .content > .actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
}

#lobby > .create > .content > .actions > .process {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    background: rgb(29, 130, 29);
    border-radius: 3px;
    cursor: pointer;
    transition: opacity 125ms;
}

#lobby > .create > .content > .actions > .process::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05Ljk5MTIxIDE4Ljc0MjJDMTQuOTc0NiAxOC43NDIyIDE5LjA4NzkgMTQuNjI4OSAxOS4wODc5IDkuNjU0M0MxOS4wODc5IDQuNjc5NjkgMTQuOTY1OCAwLjU2NjQwNiA5Ljk4MjQyIDAuNTY2NDA2QzUuMDA3ODEgMC41NjY0MDYgMC45MDMzMiA0LjY3OTY5IDAuOTAzMzIgOS42NTQzQzAuOTAzMzIgMTQuNjI4OSA1LjAxNjYgMTguNzQyMiA5Ljk5MTIxIDE4Ljc0MjJaTTkuOTkxMjEgMTYuOTMxNkM1Ljk1NzAzIDE2LjkzMTYgMi43MzE0NSAxMy42ODg1IDIuNzMxNDUgOS42NTQzQzIuNzMxNDUgNS42MjAxMiA1Ljk1NzAzIDIuMzg1NzQgOS45ODI0MiAyLjM4NTc0QzE0LjAxNjYgMi4zODU3NCAxNy4yNTk4IDUuNjIwMTIgMTcuMjY4NiA5LjY1NDNDMTcuMjc3MyAxMy42ODg1IDE0LjAyNTQgMTYuOTMxNiA5Ljk5MTIxIDE2LjkzMTZaTTE0LjUyNjQgOS42NTQzQzE0LjUyNjQgOS40MTY5OSAxNC40Mzg1IDkuMjIzNjMgMTQuMjM2MyA5LjAzMDI3TDExLjI0OCA2LjA4NTk0QzExLjEwNzQgNS45NDUzMSAxMC45MzE2IDUuODc1IDEwLjcyMDcgNS44NzVDMTAuMzA3NiA1Ljg3NSAxMC4wMDg4IDYuMTgyNjIgMTAuMDA4OCA2LjU5NTdDMTAuMDA4OCA2LjgxNTQzIDEwLjEwNTUgNyAxMC4yMzczIDcuMTMxODRMMTEuMzAwOCA4LjE1MTM3TDEyLjI4NTIgOC45NTExN0wxMC40OTIyIDguODYzMjhINi4yMDMxMkM1Ljc1NDg4IDguODYzMjggNS40Mzg0OCA5LjE5NzI3IDUuNDM4NDggOS42NTQzQzUuNDM4NDggMTAuMTAyNSA1Ljc1NDg4IDEwLjQ0NTMgNi4yMDMxMiAxMC40NDUzSDEwLjQ5MjJMMTIuMjkzOSAxMC4zNjYyTDExLjMwOTYgMTEuMTU3MkwxMC4yMzczIDEyLjE3NjhDMTAuMDg3OSAxMi4zMDg2IDEwLjAwODggMTIuNDkzMiAxMC4wMDg4IDEyLjcxMjlDMTAuMDA4OCAxMy4xMjYgMTAuMzA3NiAxMy40NDI0IDEwLjcyMDcgMTMuNDQyNEMxMC45MzE2IDEzLjQ0MjQgMTEuMTA3NCAxMy4zNjMzIDExLjI0OCAxMy4yMjI3TDE0LjIzNjMgMTAuMjg3MUMxNC40Mjk3IDEwLjA5MzggMTQuNTI2NCA5LjkwMDM5IDE0LjUyNjQgOS42NTQzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
    background-repeat: no-repeat;
    background-position: center;
}

#lobby > .create > .content > .actions > .process:hover {
    opacity: 0.95;
}

#lobby > .create > .content > .actions > .process:active {
    opacity: 0.8;
}

#lobby > .create > .content > .actions > .process.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#lobby > .rules > .content {
    padding: 12px;
    line-height: 1;
}

#lobby > .rules > .content > .section:nth-last-child(n+2) {
    margin-bottom: 20px;
}

#lobby > .rules > .content > .section > .title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

#lobby > .rules > .content > .section > .text {
    font-size: 14px;
    font-weight: bold;
    color: lightgray;
    line-height: 1.6em;
}

#lobby > .rules > .content > .section > .text > .paragraph:nth-last-child(n+2) {
    margin-bottom: 10px;
}

#lobby > .rules > .content .key-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#lobby > .rules > .content .key {
    display: inline-flex;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    background-color: gray;
    border: 1px solid white;
    border-radius: 2px;
    box-shadow: 1px 1px 1px lightblue;
    transform: translateY(-1px);
}

#lobby > .rules > .content > .section > .perk {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: lightgray;
}

#lobby > .rules > .content > .section > .perk > .color {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

#lobby > .rules > .content > .section > .perk > .info {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: lightgray;
    vertical-align: middle;
}

#game {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#game > .header {
    display: flex;
    align-items: flex-end;
    padding: 0 0 4px 8px;
}

#game > .header > .title {
    flex: 1;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

#game > .header > .actions > .action {
    display: inline-flex;
    align-items: center;
    margin: 0 2px 0 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    vertical-align: middle;
    cursor: pointer;
    transition: opacity 125ms;
}

#game > .header > .actions > .action:hover {
    opacity: 0.95;
}

#game > .header > .actions > .action:active {
    opacity: 0.8;
}

#game > .header > .actions > .action::after {
    background-repeat: no-repeat;
}

#game > .header > .actions > .leave {
    background-color: rgb(228, 149, 0);
}

#game > .header > .actions > .leave::after {
    content: '';
    width: 14px;
    height: 18px;
    margin-left: 6px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDI0LjAwOThDMCAyNC42Mzk0IDAuNTE0Njg0IDI1LjE1NDEgMS4xNDQyMSAyNS4xNTQxQzEuNzgxMjQgMjUuMTU0MSAyLjI5NTkyIDI0LjYzOTQgMi4yOTU5MiAyNC4wMDk4VjIuOTMzODlDMi4yOTU5MiAyLjU0NjIzIDIuNTQ2MjMgMi4yOTU5MiAyLjkxMjU2IDIuMjk1OTJIMTUuNjQyOUMxNi4wMDkyIDIuMjk1OTIgMTYuMjU5NSAyLjU0NjIzIDE2LjI1OTUgMi45MzM4OVYyNC4wMDk4QzE2LjI1OTUgMjQuNjM5NCAxNi43NzQyIDI1LjE1NDEgMTcuNDEzMyAyNS4xNTQxQzE4LjA0MjkgMjUuMTU0MSAxOC41NTU0IDI0LjYzOTQgMTguNTU1NCAyNC4wMDk4VjIuNzIxNzhDMTguNTU1NCAxLjA3MjczIDE3LjQ3NTIgMCAxNS43ODU2IDBIMi43NzE5NEMxLjA4OTg0IDAgMCAxLjA3MjczIDAgMi43MjE3OFYyNC4wMDk4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMuNjkwMTkgMjQuMzYzN0MzLjY5MDE5IDI0LjYxMzggMy44OTI0NSAyNC43NDE2IDQuMTUwOTcgMjQuNjMzTDcuNzg4NDcgMjMuMDQ2M0M4LjA4NTY2IDIyLjkxNzQgOC4yMDkxNyAyMi44MDY4IDguMjA5MTcgMjIuNTA4NFY1LjgxMTUxQzguMjA5MTcgNS41MjA2NSA4LjA4NTY2IDUuNDAwNDEgNy43OTgwOCA1LjI4MzIzTDQuMTUwOTcgMy42ODQ3OUMzLjg5MjQ1IDMuNTc4MzggMy42OTAxOSAzLjcwNjExIDMuNjkwMTkgMy45NjU4VjI0LjM2MzdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
}

#game > .header > .actions > .change-color.hidden {
    display: none;
}

#game > .header > .actions > .change-color::after {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjYgMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjUzNjkxIDI2LjgzMTRDMy41Njk4OCAyOC44NjY1IDUuOTQ3ODQgMjguODg5OSA3Ljk0OTg3IDI2Ljg5MjFDOS4zNDQ2MyAyNS40OTc0IDEwLjgwOTcgMjIuMjU4OCAxMS44OTg2IDIwLjkxMjVMMTQuMzM1NyAyMy4zNjEzQzE1LjMxNTEgMjQuMzUyNCAxNi41MTU4IDI0LjM1NjcgMTcuNDY5NyAyMy4zOTg1TDE5LjAwNjcgMjEuODQ5OEMxOS45NjQ5IDIwLjg3OTkgMTkuOTU4NSAxOS43MTY1IDE4Ljk2OTUgMTguNzI3NUw5LjY1MjYgOS4zOTY3NUM4LjY2MTQzIDguNDAzNDggNy40ODYyOCA4LjM5Mzg3IDYuNTE2NDQgOS4zNjM3MUw0Ljk4MTUyIDEwLjkwODJDNC4wMjEyOSAxMS44Njg1IDQuMDEzNzkgMTMuMDQ5IDUuMDA5MTggMTQuMDQyM0w3LjQ1MzcxIDE2LjQ3OTNDNi4xMTkxOCAxNy41NjgyIDIuODgwNTggMTkuMDI1OCAxLjQ4NzkzIDIwLjQxODVDLTAuNTA5ODg1IDIyLjQyMDUgLTAuNDk4MTY3IDI0LjgwODEgMS41MzY5MSAyNi44MzE0Wk02Ljg2NTY1IDEyLjE3OUw3Ljc3NjkgMTEuMjg0OUM4LjA0MTUxIDExLjAyMjQgOC4zMjk1NiAxMS4wMTA2IDguNTk0MTcgMTEuMjc1M0wxNy4wOTg1IDE5Ljc2OTlDMTcuMzUzNSAyMC4wMzQ2IDE3LjM1MzUgMjAuMzI0NyAxNy4wNzkyIDIwLjU5ODlMMTYuMTk2OCAyMS40OTFDMTUuOTMwMSAyMS43NzY5IDE1LjYyNDkgMjEuNzg2NSAxNS4zNTYxIDIxLjUwMDZMMTIuNTQyNyAxOC42Nzc1QzEyLjA2NDggMTguMTk3NSAxMS40MzA2IDE4LjI0NDQgMTAuODg3OCAxOC43NzM0QzkuOTczNyAxOS42NzM2IDguMzgzIDIzLjUwMzggNi41MTMzOSAyNS4zNTk2QzUuNDQxMTIgMjYuNDQxNCA0LjE0NzE0IDI2LjQzOTMgMy4wMzIyMSAyNS4zMzYxQzEuOTM4NjIgMjQuMjMwOCAxLjkyNDc5IDIyLjkyMyAzLjAwNjY2IDIxLjg1MDdDNC44NzYyNyAxOS45OTcxIDguNzA0MzIgMTguNDA0MiA5LjYwNjY3IDE3LjQ4ODFDMTAuMTIzOSAxNi45Mzc4IDEwLjE4MDQgMTYuMzAzNSA5LjcwMDQyIDE1LjgzMzJMNi44NjU2NSAxMy4wMDU5QzYuNTk4OTMgMTIuNzQxMyA2LjU5ODkzIDEyLjQ0NTcgNi44NjU2NSAxMi4xNzlaTTQuNzQ1MDMgMjUuMDQyOUM1LjUxNDQ4IDI1LjA0MjkgNi4xMzU4MSAyNC40MTIgNi4xMzU4MSAyMy42NDQ2QzYuMTM1ODEgMjIuODc3MyA1LjUxNDQ4IDIyLjI1NiA0Ljc0NTAzIDIyLjI1NkMzLjk3NzY4IDIyLjI1NiAzLjM0Njc0IDIyLjg3NzMgMy4zNDY3NCAyMy42NDQ2QzMuMzQ2NzQgMjQuNDEyIDMuOTc3NjggMjUuMDQyOSA0Ljc0NTAzIDI1LjA0MjlaTTE4LjY1MDcgMjAuMTIzOEwyNC4zMTQyIDE0LjQ2MjVDMjUuNjcxOSAxMy4xMDI3IDI1LjY0NDIgMTEuNDY2IDI0LjI1MTQgMTAuMDcxTDE1LjAzOTUgMC44NDUzNDlDMTMuNzA3OCAtMC40ODYzNjYgMTEuNDYzMiAwLjA1NTI3MjMgMTEuMDA0MyAyLjA3NTExQzkuODcyMjIgNi45Njk3OSA5Ljg2MTIxIDcuMzY5ODcgOC4wMjYwNSA5LjkzNDY0TDkuNTc0MDkgMTEuNDc4NUMxMS43NTE0IDguNjc4ODUgMTEuODc2NCA3LjM1MTU5IDEyLjk5NzEgMy4yMjI4M0MxMy4xMzA1IDIuNzAxMTEgMTMuNTU5NCAyLjU2NTY0IDEzLjkxMTQgMi45MDgwN0wyMi42MTI4IDExLjU5OTlDMjMuMDk5MiAxMi4wODYyIDIzLjA5NzEgMTIuNjQzMyAyMi42NTAxIDEzLjA5MjRMMTcuMTM1NyAxOC42MDg5TDE4LjY1MDcgMjAuMTIzOFpNMTYuNzY1NCAxMy4yODM5QzE3LjM4NDQgMTMuOTA0OSAyMC44MDg0IDEyLjAwNjUgMjEuOTg5OSAxMC41MTgyTDE5LjQxMzkgNy45NTE4MkMxOS4xOTEyIDEwLjAyNiAxOC4xMTMxIDExLjUyNiAxNi44MDA2IDEyLjgzODVDMTYuNjQ4MiAxMi45OTA5IDE2LjY1OTkgMTMuMTgwNSAxNi43NjU0IDEzLjI4MzlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
    transform: translate(2px, -1px);
}

#game > canvas {
    background-color: rgba(0, 0, 0, 0.5);
}