body {
    background: #31253e;
    margin: 0;
}

.field {
    border: 8px solid #150f1b;
    background: #150f1b;
}

.cell {
    margin: 5px;
}

.playable_cell {
    outline: 6px solid #150f1b;
    border: 5px solid #31253e;
}

.non_playable_cell {
    outline: 6px solid transparent;
    border: 5px solid transparent;
}

.cellinfo {
    background: #31253e;
}

.blue {
    background: linear-gradient(35deg, #4acfec, #0d96ff90);
    outline: 10px solid #1d5383;
    justify-content: center;
    align-items: center;
    z-index: 8;
}

.red {
    background: linear-gradient(35deg, #e71d30, #f85c3980);
    outline: 10px solid #7b1f1f;
    justify-content: center;
    align-items: center;
    z-index: 8;
}

.selected, .inprogress {
    outline: 10px solid #ffcd39;
    z-index: 8;
}

.makeinprogress {
    background: #ffcd39;
}

.lock {
    background-color: #150f1b;
    background-image: url(https://static.tildacdn.com/tild3137-3862-4963-b932-343466316235/padlock1.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.locked {
    border-color: #150f1b;
    background-color: #150f1b;
    background-image: none !important;
}

.draw {
    background: linear-gradient(15deg, #e71d308a 0%, #f85c39 49%, #4acfec 51%, #0d96ff96 100%);
    z-index: 8;
}

.locked .diffname {
    display: none;
}

.determined .diffname {
    display: none;
}

.non-interesting {
    filter: grayscale(1);
}

.cell .red::before {
    content: "✖";
    color: #7b1f1f;
    font-size: 75px;
    font-weight: 600;
}

.cell .blue::before {
    content: "✖";
    color: #1d5383;
    font-size: 75px;
    font-weight: 600;
}

.cell .draw::before, .players_names::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: linear-gradient(15deg, #7b1f1f 0%, #7b1f1f 49%, #1d5383 51%, #1d5383 100%);
    filter: blur(0px);
    transform: translate3d(0px,0px,-1px);
    clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,calc(11px - 0px) calc(11px - 0px),calc(11px - 0px) calc(100% - 0px - 11px),calc(100% - 0px - 11px) calc(100% - 0px - 11px),calc(100% - 0px - 11px) calc(11px - 0px),calc(11px - 0px) calc(11px - 0px));
    pointer-events: none;
    z-index: 5;
}

.p1, .p2 {
    color: white;
}

#managerbuttons button, #settingbutton button {
    color: white;
    border: none;
    outline: none;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    text-shadow: 2px 2px 6px #00000080;
}

#resetcell, #settingbutton button {
    background: #150f1b;
}

.players_names {
    background: linear-gradient(15deg, #e71d308a 0%, #f85c39 49%, #4acfec 51%, #0d96ff96 100%);
    text-shadow: 2px 2px 6px #00000050;
}

.diffname {
    z-index: 10;
}

.randomizer {
    outline: 10px solid #934ce8;
    z-index: 8;
}