:root { --game: #f97316; }
.rc-stage { margin: 8px auto 16px; padding: 4px 0 8px; }
.ck-shell {
  position: relative;
  max-width: 590px;
  margin: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 0 40px #f9731615;
}
.ck-shell h1 { margin: 0 3px; font-size: 1.45rem; }
.ck-sub { margin: 0 3px 4px; color: var(--text-dim); font-size: .8rem; }
.ck-controls, .ck-hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 2px;
}
.ck-controls label, .ck-hud { color: var(--text-dim); font-size: .82rem; }
.ck-controls select, .ck-controls button {
  min-height: 40px;
  padding: 5px 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid #494951;
  border-radius: 8px;
  font-size: .82rem;
}
.ck-controls :focus-visible, .ck-square:focus-visible {
  outline: 2px solid var(--game);
  outline-offset: -2px;
}
.ck-controls button:disabled { opacity: .4; }
.ck-hud { justify-content: space-between; }
.ck-hud strong { color: var(--text); }
.ck-player {
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: .82rem;
}
.ck-player.active { color: var(--game); font-weight: 700; }
.ck-board {
  --surface-2: #35353d;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  max-width: 560px;
  margin: auto;
  border: 2px solid #55515a;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.ck-square, .ck-light {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
}
.ck-light { background: var(--surface); touch-action: manipulation; }
.ck-square {
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ck-square.target::after {
  content: '';
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: #ffb475;
  box-shadow: 0 0 0 2px #17171b;
}
.ck-square.selected { box-shadow: inset 0 0 0 4px #fff; }
.ck-square.hint { box-shadow: inset 0 0 0 3px #fbbf24; }
.ck-square.last::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #f97316a0;
  border-radius: 4px;
}
.ck-piece {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  box-shadow: inset 0 -5px 0 #0003, 0 2px 4px #0008;
  touch-action: manipulation;
}
.ck-square.movable .ck-piece { touch-action: none; }
.ck-piece.yours { background: var(--game); border: 2px solid #ffd2a7; }
.ck-piece.theirs { background: var(--text); border: 3px solid #18181d; }
.ck-piece.king { border-width: 5px; }
.ck-crown {
  width: 52%;
  height: 42%;
  background: #27262a;
  clip-path: polygon(0 20%, 25% 50%, 50% 0, 75% 50%,
    100% 20%, 88% 100%, 12% 100%);
}
.ck-piece.theirs .ck-crown { background: var(--game); }
.ck-square.movable .ck-piece { outline: 2px solid #fbbf24a0; outline-offset: 1px; }
.ck-square.selected .ck-piece { outline: 2px solid #fff; }
.ck-square.pulse .ck-piece, .ck-square.hint .ck-piece,
.ck-square.hint::after { animation: ck-pulse .8s ease-in-out 2; }
.ck-square.shake { animation: ck-shake .25s ease-in-out; }
.ck-piece.captured-disc { position: absolute; animation: ck-fade .18s ease-out forwards; }
.ck-square.crowned .ck-piece { animation: ck-pulse .3s ease-in-out; }
.ck-ghost {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .85;
  background: transparent;
  box-shadow: none;
}
.ck-ghost .ck-square {
  width: 100%;
  background: transparent;
  box-shadow: none;
  outline: 0;
}
.ck-ghost .ck-square::before,
.ck-ghost .ck-square::after { content: none; }
.ck-ghost .ck-piece { outline: 0; box-shadow: none; }
.ck-square.rc-drag-source { opacity: .35; }
#message { min-height: 1.4em; margin: 5px 4px; color: var(--text); }
.ck-help { margin: 4px; color: var(--text-dim); font-size: .78rem; }
@keyframes ck-pulse { 50% { filter: brightness(1.6); } }
@keyframes ck-shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes ck-fade { to { opacity: .15; } }
@media (max-width: 370px) {
  .rc-stage { margin: 4px auto 12px; padding: 0; }
  .ck-shell { padding: 1px; border-width: 0; }
  .ck-shell h1 { line-height: 1.3; }
  .ck-sub { display: none; }
  .ck-hud {
    position: absolute;
    top: 2px;
    right: 4px;
    gap: 8px;
    margin: 0;
    font-size: .72rem;
  }
  .ck-player { padding: 2px 6px; }
  #message { margin: 2px 4px; min-height: 1.2em; }
  .ck-controls { margin: 2px; flex-wrap: nowrap; }
  .ck-controls label { display: none; }
  .ck-board { border-width: 1px; }
  .ck-controls select, .ck-controls button { padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-square.pulse .ck-piece, .ck-square.shake,
  .ck-piece.captured-disc, .ck-square.crowned .ck-piece { animation: none; }
}