.kr-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }

.kr-options { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kr-opps, .kr-diffs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kr-opp, .kr-diff {
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.kr-opp:hover, .kr-diff:hover { border-color: var(--color-primary); }
.kr-opp--active, .kr-diff--active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-accent); }

.kr-board {
  display: flex;
  flex-direction: column;
  width: min(90vw, 400px);
  aspect-ratio: 1;
  border: 3px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.kr-row { display: flex; flex: 1; }
.kr-cell {
  flex: 1;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kr-cell--light { background: #d8c9a8; cursor: default; }
.kr-cell--dark { background: #6d4c30; cursor: pointer; }
.kr-cell--selected { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.kr-cell--dest.kr-cell--dark { background: #8a6a3f; }

.kr-piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.3), inset 0 3px 4px rgba(255,255,255,0.25), 0 2px 3px rgba(0,0,0,0.4);
}
.kr-piece--r { background: linear-gradient(160deg, #ef5350, #b71c1c); }
.kr-piece--b { background: linear-gradient(160deg, #424242, #0d0d0d); }
.kr-piece--king { border: 2px solid #ffd54f; }

.kr-dot {
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(79, 216, 224, 0.85);
}

.kr-toolbar { display: flex; gap: 10px; }

@media (max-width: 480px) {
  .kr-board { width: 92vw; }
}