/* R4 board presentation owner. Every cell remains an original interactive cell. */
#board{position:absolute;left:var(--bx);top:var(--by);width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);touch-action:none;border:0;outline-offset:8px;--minor:#c1e3df3d;--major:#d9eee3c7;--can:#d1f5f4;--clear:#f5d89e;--blocked:#f2a18d}
#board:focus-visible{outline:none}
#board .cell{min-width:0;min-height:0;position:relative;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:none;transition:background-color .22s ease-out}
#board .cell:active{transform:none}
#board.selected .box-landscaped{background-color:#032c3440;transition-duration:.14s}
#board.selected .box-open{background-color:#a0e6e51a;transition-duration:.14s}
#board[data-phase=night]{--minor:#b6e9ed59;--major:#d7f2edd9;--clear:#ffe2a5}
#board[data-phase=night].selected .box-landscaped{background-color:#041c2c55}
#board[data-phase=night].selected .box-open{background-color:#b1edeb23}
#board[data-weather=rain],#board[data-weather=thunderstorm]{--major:#ddf0e7db;--can:#e0ffff;--blocked:#ffac98}
#board .cell::after{content:"";position:absolute;inset:0;border-right:1px solid var(--minor);border-bottom:1px solid var(--minor);pointer-events:none;opacity:0;transition:opacity .22s ease-out}
#board .cell:nth-child(3n)::after{border-right:2px solid var(--major)}
#board .cell:nth-child(n+19):nth-child(-n+27)::after,#board .cell:nth-child(n+46):nth-child(-n+54)::after{border-bottom:2px solid var(--major)}
#board .cell:nth-child(9n)::after{border-right:0}
#board .cell:nth-child(n+73)::after{border-bottom:0}
#board.selected .cell::after{opacity:1;transition-duration:.14s}
/* Semantic marks never fade after their query is cleared or invalidated. */
#board .cell::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
#board .cell.clear-preview::before{background:#f0cb761c}
#board .cell.target-valid::before{inset:3px;border:2px solid var(--can);border-radius:4px;background:#d2f8f52a;box-shadow:0 0 5px #c8f4f144}
#board .cell.target-valid.clear-preview::before{background:#f0cb7625}
#board .cell.target-invalid::before{inset:3px;border:1.8px dashed var(--blocked);border-radius:4px;background:#d57d6d16}
#board .cell.target-conflict::before{border-style:solid;background:linear-gradient(45deg,transparent 45%,#f6b0a9c9 47%,#f6b0a9c9 52%,transparent 54%),linear-gradient(-45deg,transparent 45%,#f6b0a9c9 47%,#f6b0a9c9 52%,transparent 54%),#d9796533;background-size:65% 65%;background-position:center;background-repeat:no-repeat}
#board .cell.keyboard-anchor::before{outline:1px dotted var(--can);outline-offset:3px}
#board .cell:focus-visible{outline-offset:-4px}
#board .clear-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
#board .clear-guide path{fill:none;stroke:var(--clear);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
body[data-reduced=true] #board .cell,body[data-reduced=true] #board .cell::after{transition-duration:.06s}
@media(prefers-reduced-motion:reduce){#board .cell,#board .cell::after{transition-duration:.06s}}