/* Sol e Lua: six rows of six cells, like the Sudoku board; the "=" and "×" signs sit on the line between two cells
   (game.js sets --r and --c, the first cell of the pair). Pieces are the images /j/diario/img/sol.png and lua.png. */
.sol-e-lua { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--card); }
.sol-e-lua button { display: grid; place-items: center; min-width: 0; min-height: 0; border: 0; border-right: 1px solid #d9d0e2; border-bottom: 1px solid #d9d0e2; background: var(--card); padding: 0; cursor: pointer; }
.sol-e-lua button:nth-of-type(6n) { border-right: 0; }
.sol-e-lua button:nth-of-type(n+31) { border-bottom: 0; }
.sol-e-lua img { width: 60%; height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.sol-e-lua img[hidden] { display: none; }
.sol-e-lua .given { background: #ebe7ee; cursor: default; }
.sol-e-lua .hinted { background: #e6f3e7; }
.sol-e-lua .wrong { background: #fdecec; box-shadow: inset 0 0 0 3px #c62828; }
.sol-e-lua .sign { position: absolute; z-index: 1; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px #d9d0e2; color: var(--ink); font: 900 1.125rem/1 var(--title); pointer-events: none; }
.sol-e-lua .sign.right { left: calc((var(--c) + 1) * 100% / 6); top: calc((var(--r) + .5) * 100% / 6); }
.sol-e-lua .sign.down { left: calc((var(--c) + .5) * 100% / 6); top: calc((var(--r) + 1) * 100% / 6); }
.sol-e-lua .sign.broken { background: #c62828; box-shadow: none; color: #fff; }
.finished .sol-e-lua button { cursor: default; }