@import url('../global.css');

:root {
  --title-color: var(--color-kakurasu);
}

/* (size + 1) tracks: the play grid plus a trailing clue column / clue row. */
.kakurasu-board {
  display: grid;
  grid-template-columns: repeat(calc(var(--kakurasu-size, 5) + 1), 1fr);
  grid-template-rows: repeat(calc(var(--kakurasu-size, 5) + 1), 1fr);
  gap: 3px;
  aspect-ratio: 1;
  place-content: center;
  padding: var(--spacing-sm);
  background: var(--logic-grid-frame-bg);
  border: 1px solid var(--logic-grid-frame-border);
  border-radius: var(--border-radius-lg);
  transition:
    background 0.2s,
    border-color 0.2s;
}

.kakurasu-cell {
  aspect-ratio: 1;
  border: 1.5px solid var(--logic-grid-cell-border);
  border-radius: var(--border-radius-sm);
  background: var(--logic-grid-cell-bg);
  cursor: pointer;
  transition: background 0.12s ease;
}
.kakurasu-cell.is-filled {
  background: var(--logic-grid-accent);
  box-shadow: inset 0 -2px 4px rgb(0 0 0 / 35%);
}

/* Clue strips: numbers on the right (rows) and bottom (columns). */
.kakurasu-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.75rem, 3.4vmin, 1.2rem);
  font-weight: var(--font-weight-bold);
  color: var(--logic-grid-ink);
}
.kakurasu-clue.is-met {
  color: var(--success);
}
.kakurasu-clue.is-over {
  color: var(--danger);
}

.kakurasu-corner {
  background: transparent;
}