@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&display=swap");

:root {
    --cell-size: 24px;
    --grid-border: #3c3c3c;
    --subgrid-border: #3c3c3c;
    --hover: lightgrey;
    --hover-help: #f4f4f4;
    --cell-highlight: #3c3c3c;
    --cell-empty: white;
    --cell-fill: #5a5a5a;
    --cell-temp-empty: var(--cell-empty);
    --cell-temp-fill: var(--cell-fill);
    --cell-temp-crossed: var(--cell-crossed);
    --clue-num: #3c3c3c;
}

body {
    margin: 0px;
}

.puzzle {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
}

.puzzle .half {
    display: flex;
}

.puzzle .half.top {
    flex-direction: row-reverse;
}

.clue {
    display: flex;
}

.clue.col-clues {
    display: flex;
}

.clue.row-clues {
    display: flex;
    flex-direction: column;
}

.col-clue.hover-help,
.row-clue.hover-help {
    background-color: var(--hover-help);
}

.col-clue {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-width: var(--cell-size);
    border-top: 2px solid var(--grid-border);
    border-left: 1px solid var(--subgrid-border);
}

.col-clue.border-left {
    border-left: 2px solid var(--grid-border);
}

.col-clue.border-right {
    border-right: 2px solid var(--grid-border);
}

.row-clue {
    display: flex;
    justify-content: end;
    min-height: var(--cell-size);
    border-top: 1px solid var(--subgrid-border);
    border-left: 2px solid var(--grid-border);
}

.row-clue.border-top {
    border-top: 2px solid var(--grid-border);
}

.row-clue.border-bottom {
    border-bottom: 2px solid var(--grid-border);
}

.clue .clue-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--cell-size);
    height: var(--cell-size);
}

.clue .clue-cell .clue-num {
    user-select: none;
    font-family: "Barlow", monospace;
    font-weight: 600;
    font-size: calc(var(--cell-size) * 0.75);
    color: var(--clue-num);
}

.puzzle .grid {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
}

.puzzle .grid .row {
    display: flex;
}

.puzzle .grid .row .cell-container {
    box-sizing: content-box;
    width: var(--cell-size);
    height: var(--cell-size);
    border-top: 1px solid var(--subgrid-border);
    border-left: 1px solid var(--subgrid-border);
}

.puzzle .grid .row .cell-container .cell.empty {
    background-color: var(--cell-empty);
}

.puzzle .grid .row .cell-container .cell.filled {
    background-color: var(--cell-fill);
}

.puzzle .grid .row .cell-container .cell.temp-empty {
    background-color: var(--cell-temp-empty);
}

.puzzle .grid .row .cell-container .cell.temp-filled {
    background-color: var(--cell-temp-fill);
}

.puzzle .grid .row .cell-container .cell.empty.hover-help:not(.temp-filled),
.puzzle .grid .row .cell-container .cell.temp-empty.hover-help,
.puzzle .grid .row .cell-container .cell.crossed.hover-help,
.puzzle .grid .row .cell-container .cell.temp-crossed.hover-help {
    background-color: var(--hover-help);
}

.puzzle .grid .row .cell-container .cell.crossed:not(.temp-empty):after,
.puzzle .grid .row .cell-container .cell.temp-crossed:after {
    content: "\d7";
    font-size: calc(var(--cell-size) * 1.5);
    color: var(--cell-fill);
}

.puzzle .grid .row .cell-container.border-top {
    border-top: 2px solid var(--grid-border);
}

.puzzle .grid .row .cell-container.border-left {
    border-left: 2px solid var(--grid-border);
}

.puzzle .grid .row .cell-container.border-bottom {
    border-bottom: 2px solid var(--grid-border);
}

.puzzle .grid .row .cell-container.border-right {
    border-right: 2px solid var(--grid-border);
}

.puzzle .grid .row .cell-container .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--cell-size);
    height: var(--cell-size);
}

.puzzle .grid .row .cell-container .cell.hover {
    cursor: crosshair;
    position: relative;
    outline: 4px solid var(--cell-highlight);
}