/* =============================================================
   GAME: Congklak — boat-shaped board, violet neon, cowrie shells
   ============================================================= */
.board-congklak {
  --cell: min(calc((100vw - 112px) / 9.4), 56px);
  --ck-glow: #e27bff;
  display: grid; grid-template-columns: repeat(9, var(--cell)); grid-template-rows: repeat(2, calc(var(--cell) + 16px));
  gap: 5px 3px; padding: 12px calc(var(--cell) * .5); border-radius: calc(var(--cell) * 1.6) / 50%;
  --pit: inset 0 5px 9px rgba(0, 0, 0, .85), inset 0 -2px 3px rgba(230, 140, 255, .14), 0 1px 0 rgba(240, 190, 255, .16), 0 -1px 0 rgba(0, 0, 0, .45);
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(226, 123, 255, .10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #3a1a4a 0%, #2a1038 50%, #1a0824 100%);
  box-shadow: 0 0 0 2px var(--ck-glow), 0 0 28px rgba(226, 123, 255, .38),
    inset 0 2px 0 rgba(255, 220, 255, .12), inset 0 -7px 0 rgba(0, 0, 0, .35), 0 12px 24px rgba(0, 0, 0, .35);
}
.ck-pit, .ck-store {
  position: relative; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
  font: 700 12px/15px var(--font-body); min-width: 0; min-height: 0;
}
.ck-pit.top, .ck-store.top { flex-direction: column-reverse; }
.ck-pit { cursor: default; -webkit-tap-highlight-color: transparent; }
.ck-seeds {
  position: relative; display: block; flex: none; width: var(--cell); height: var(--cell); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #07020b 0%, #140620 50%, #26103a 85%, #34184c 100%);
  box-shadow: var(--pit);
  transition: background .15s, box-shadow .15s, opacity .2s;
}
/* cowrie shells: glossy cream ovals with the toothed slit */
.ck-seeds i {
  --c: #f6ecd6;
  position: absolute; width: calc(var(--cell) * .27); height: calc(var(--cell) * .19); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .4) 16%, transparent 38%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 95%, #fff) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 55%, #6b4a2a) 100%);
  box-shadow: 0 1.5px 2px rgba(0, 0, 0, .8), inset 0 -1px 1px rgba(90, 60, 30, .35);
}
.ck-seeds i::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 46%; height: 12%; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #5c3b22 0 1px, #a07a52 1px 2px); opacity: .85;
}
.ck-n { display: block; min-width: 18px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-pit.legal { cursor: pointer; }
.ck-pit.legal .ck-seeds { box-shadow: var(--pit), 0 0 0 2px var(--ck-glow), 0 0 11px rgba(226, 123, 255, .5); }
.ck-pit.legal .ck-n { color: var(--ink); }
.ck-pit.legal:hover .ck-seeds { background: radial-gradient(circle at 50% 38%, #12051c 0%, #22093a 50%, #3a1658 85%, #4b2170 100%); }
.ck-pit:focus-visible { outline: none; }
.ck-pit:focus-visible .ck-seeds { outline: 3px solid var(--focus); outline-offset: 2px; }
.ck-pit.last .ck-seeds { box-shadow: var(--pit), 0 0 0 2px var(--t-gold), 0 0 12px rgba(255, 210, 63, .45); }
.ck-pit.land .ck-n { color: var(--t-gold); }
/* holes closed for this round */
.ck-pit.burnt .ck-seeds { opacity: .35; background: repeating-linear-gradient(45deg, #1a0a24 0 4px, #0c0412 4px 8px); }
.ck-pit.burnt .ck-n { opacity: .4; }

/* stores ("rumah") at the boat's ends */
.ck-store { grid-row: span 2; }
.ck-store .ck-seeds { width: 100%; height: auto; flex: 1; border-radius: 999px; }
.ck-store .ck-seeds { background: radial-gradient(90% 60% at 50% 40%, #07020b 0%, #140620 55%, #26103a 88%, #34184c 100%); }
.ck-store.s1 .ck-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p1), 0 0 14px color-mix(in srgb, var(--p1) 40%, transparent); }
.ck-store.s2 .ck-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p2), 0 0 14px color-mix(in srgb, var(--p2) 40%, transparent); }
.ck-store .ck-seeds i { width: calc(var(--cell) * .3); height: calc(var(--cell) * .21); }
.ck-store .ck-n { font-size: 14px; color: #fff; }

.drop .ck-seeds { animation: ckdrop .2s ease-out; }
@keyframes ckdrop { 40% { transform: scale(1.08); box-shadow: var(--pit), 0 0 0 2px rgba(226, 123, 255, .7), 0 0 14px rgba(226, 123, 255, .5); } }
.drop .ck-seeds i:last-child { animation: ckseed .22s ease-out; }
@keyframes ckseed { from { transform: translate(-50%, -120%) rotate(var(--r, 0deg)) scale(1.3); opacity: 0; } }
.pick .ck-seeds { animation: ckpick .3s ease-out; }
@keyframes ckpick { 40% { box-shadow: var(--pit), 0 0 0 2px var(--t-gold), 0 0 16px rgba(255, 210, 63, .6); } }
.taken .ck-seeds { animation: cktaken .6s ease-out; }
@keyframes cktaken { 30% { background: #5a1840; box-shadow: 0 0 0 2px var(--t-red), 0 0 18px var(--t-red); } }