.kl-scroll { overflow: auto; display: grid; place-items: center; }
.kl-board {
  display: grid; gap: 4px; background: #3a3458; padding: 4px;
  border-radius: 14px; position: relative; touch-action: none;
}
.kl-cell { background: #4a4368; border-radius: 6px; }
.kl-piece {
  border-radius: 8px; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25);
  transition: transform .08s ease, box-shadow .12s ease;
  text-align: center; line-height: 1.05; padding: 2px;
}
.kl-piece:active { transform: scale(.97); }
.kl-piece.sel { box-shadow: 0 0 0 3px var(--sun); }
.p-cao { background: linear-gradient(135deg, #ff6b8a, #ff3d6e); font-size: 22px; }
.p-gu  { background: linear-gradient(135deg, #2fd6a8, #19b98e); }
.p-gen { background: linear-gradient(135deg, #4cc9f0, #3a8fd0); }
.p-sol { background: linear-gradient(135deg, #b9b2d0, #8a83a3); font-size: 12px; }
.kl-exit {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: calc(50% - 6px); height: 4px; background: var(--sun); border-radius: 4px;
}