/* Checkers screen. Every class starts with ck-. Board squares are min(11vw, 52px): 8 of them fit a 360px phone. */
.ck-wrap { --ck-sq: min(11vw, 52px); --ck-w: calc(var(--ck-sq) * 8 + 6px); display: grid; justify-items: center; gap: .5rem; }
.ck-wrap > * { width: 100%; max-width: var(--ck-w); }
.ck-wrap > .ck-board { width: auto; max-width: none; }

.ck-board {
  display: grid; grid-template-columns: repeat(8, var(--ck-sq)); grid-template-rows: repeat(8, var(--ck-sq));
  border: 3px solid #3d2410; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.ck-sq {
  --bg: #7a4b2a; position: relative; width: var(--ck-sq); height: var(--ck-sq); margin: 0; padding: 0; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bg); cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.ck-light { --bg: #ead2a4; }
.ck-dark { --bg: #7a4b2a; }
.ck-dark.ck-last { --bg: #9a7a2c; }
.ck-dark.ck-sel { --bg: #4f8a3c; }
.ck-live .ck-can, .ck-live .ck-dest { cursor: pointer; }
.ck-sq:focus-visible { outline: 3px solid #64b5f6; outline-offset: -3px; }
.ck-dest::after {
  content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: rgba(140, 230, 120, .75);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); pointer-events: none;
}
.ck-jumped .ck-disc { opacity: .4; }

/* pieces: discs with a raised rim; kings carry a gold crown */
.ck-disc {
  position: relative; z-index: 1; width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  pointer-events: none; box-shadow: 0 3px 4px rgba(0, 0, 0, .5);
}
.ck-b { background: radial-gradient(circle at 40% 35%, #555 0, #222 45%, #0d0d0d 100%); border: 2px solid #9a9a9a; }
.ck-w { background: radial-gradient(circle at 40% 35%, #fff 0, #f4ecd8 50%, #d8cbad 100%); border: 2px solid #8b7a57; }
.ck-b::before, .ck-w::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); }
.ck-w::before { border-color: rgba(0, 0, 0, .14); }
.ck-crown {
  position: relative; font: 400 calc(var(--ck-sq) * .42)/1 "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", serif;
  color: #f2c230; text-shadow: .6px 0 #5a3f00, -.6px 0 #5a3f00, 0 .6px #5a3f00, 0 -.6px #5a3f00, 0 1px 2px rgba(0, 0, 0, .6);
}
.ck-mini { width: 1.1rem; height: 1.1rem; flex: none; box-shadow: none; }
.ck-mini::before { display: none; }

/* coordinates, tucked into the corner squares */
.ck-rank, .ck-file { position: absolute; font: 700 max(9px, calc(var(--ck-sq) * .2))/1 var(--body); color: #ead2a4; pointer-events: none; z-index: 2; }
.ck-light .ck-rank, .ck-light .ck-file { color: #7a4b2a; }
.ck-rank { top: 2px; left: 3px; }
.ck-file { bottom: 2px; right: 3px; }

/* players above and below the board */
.ck-player {
  display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .3rem .65rem; border-radius: 12px;
  background: rgba(0, 0, 0, .25); border: 2px solid transparent;
}
.ck-player.ck-turn { border-color: var(--gold); }
.ck-player.ck-you { background: rgba(227, 179, 65, .16); }
.ck-name { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-color { font-weight: 400; color: var(--muted); font-size: .85rem; }
.ck-left { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: .9rem; }

.ck-hint { margin: 0; color: var(--gold); font-weight: 600; text-align: center; }
.ck-offer { margin: 0; }
.ck-offer p { margin: 0 0 .25rem; }
.ck-buttons { margin: .25rem 0 0; }