.centered-title {
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

[draggable="true"] {
    cursor: grab;
    /* before drag */
}

[draggable="true"]:active {
    cursor: grabbing;
    /* while dragging */
}

.board-wrap.alt {
    background: #0f1c4d;
    border: 1px solid #1f4766
}


.board.selected {
    background: transparent;
}

.ship-ghost {
    position: fixed;
    pointer-events: none;
    background: transparent;
}


.cell.bad {
    border: 2px solid red;
}

.cell.sea.bad {
    border: 2px solid #ff0080;
}

.cell.land.bad {
    border: 2px solid #ff7219;
}

.cell.good {
    border: 2px solid green;
}

.cell.sea.good {
    border: 2px solid #1ABB99;
}

.cell.land.good {
    border: 2px solid #29BB34
}



.cell.land.light.bad {
    background: #B48239
}

.cell.land.dark.bad {
    background: #A96334
}

.cell.sea.light.bad {
    background: #BA78D6
}

.cell.sea.dark.bad {
    background: #9761B0
}

.cell.land.light.good {
    background: #34F239
}

.cell.land.dark.good {
    background: #29C334
}

.cell.sea.light.good {
    background: #1AE8D6
}

.cell.sea.dark.good {
    background: #17C1B0
}

.cell.empty {
    background: transparent
}




.clicked {
    border: 3px solid goldenrod
}

.tally-row {
    display: flex;
    gap: 6px;
    align-items: center
}

.tally-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tally-box {
    width: 28px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(200, 210, 240, 0.06);
    display: grid;
    place-items: center;
    font-weight: 700
}

button {
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: #2b4066;
    color: #aaccff;
    cursor: pointer
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed
}

span.shortcut {
    color: #FFF;
    font-weight: 900;
}

.info {
    color: #fff
}

h2 {
    margin: 0 0 12px 0
}

a img.drop-cap {
    background: transparent;
    box-shadow: none;
}