/* Ulighed (Futoshiki) */
.futoshiki .cell { cursor: pointer; font-weight: 500; color: var(--accent); }
.futoshiki .cell.given { color: var(--ink); font-weight: 700; background: #f0eeea; }
.futoshiki .cell.selected { background: #cfe3fb; }
.futoshiki .cell.same { background: #e3eefb; }
.futoshiki .cell.bad { color: var(--bad); }
/* Keep pencil marks clear of the signs sitting on the cell borders. */
.futoshiki .notes { padding: 16% 14%; }
.futoshiki .sign {
  position: absolute; transform: translate(-50%, -50%); width: calc(min(100vw, 480px) / var(--n) * 0.36); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%;
  color: #5a4a2e; pointer-events: none; z-index: 1;
}
.futoshiki .sign svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.futoshiki .sign.gt svg { transform: rotate(180deg); }
.futoshiki .sign.up svg { transform: rotate(90deg); }
.futoshiki .sign.down svg { transform: rotate(-90deg); }
.futoshiki .sign.bad { color: #fff; background: var(--bad); }