/* Nava Kankari — kolam-dotted board, three squares, shell pieces. */
.levels { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.levels .tnz-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
.levels .tnz-btn.on { border-color: var(--primary); color: var(--primary); }
.ta { font-size: 13px; opacity: .9; }

.nk-score { display: flex; gap: 10px; width: min(100%, 420px); margin-bottom: 6px; }
.nk-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 6px 10px; transition: border-color .2s, box-shadow .2s; }
.nk-side.turn { border-color: var(--gold); box-shadow: 0 0 12px #ffc53344; }
.nk-side .who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.nk-side .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-side .tray { color: var(--muted); font-size: 11px; letter-spacing: 1px; min-height: 14px; }
.nk-side .n { font-size: 20px; }
.nk-side .nk-pc { position: relative; width: 22px; height: 22px; flex: none; transform: none; left: auto; top: auto; }
.nk-turn { font-weight: 700; min-height: 24px; margin: 4px 0 8px; text-align: center; }
.nk-turn.mill { color: var(--gold); animation: nk-shout .5s ease; }
@keyframes nk-shout { 50% { transform: scale(1.12); } }

.nk-board {
  position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 18px;
  background:
    radial-gradient(circle, #ffffff1c 1.5px, transparent 2px) 0 0 / 20px 20px,
    radial-gradient(120% 120% at 30% 20%, #7a2e1a, #4a160c 70%);
  box-shadow: 0 10px 28px #0009, inset 0 0 0 4px #c98a2e, inset 0 0 0 7px #4a160c, inset 0 0 0 8px #c98a2e88;
  touch-action: manipulation;
}
.nk-board svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nk-board svg.lines .ln { stroke: #f5d9a6; stroke-width: 1.1; stroke-linecap: round; fill: none; opacity: .9; }
.nk-board svg.lines .kolam { stroke: #ffd36b; stroke-width: .5; fill: none; opacity: .55; }
.nk-board svg.lines .kolam-dot { fill: #ffd36b; opacity: .6; }
.nk-board svg.lines .mill { stroke: var(--gold); stroke-width: 2.4; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 2px #ffc533); }
.nk-board svg.lines .mill.on { opacity: 1; }

.nk-pt { position: absolute; width: 12%; height: 12%; margin: -6% 0 0 -6%; border: 0; padding: 0; background: transparent; border-radius: 50%; }
.nk-pt::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%; background: #f5d9a6; box-shadow: 0 0 0 2px #4a160c; }
.nk-pt.dest::after { content: ''; position: absolute; inset: 16%; border-radius: 50%; border: 2px dashed var(--gold); animation: nk-spin 3s linear infinite; }
@keyframes nk-spin { to { transform: rotate(360deg); } }
.nk-pt.hint::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 16px 4px #ffc533aa; animation: nk-hint 1s ease-in-out 3; }
@keyframes nk-hint { 50% { transform: scale(1.25); } }
.nk-pc { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 50%; }
.nk-pc.p0 { background: radial-gradient(circle at 35% 30%, #fff3c4, #f5b72f 50%, #a36a06); box-shadow: 0 3px 4px #000a, inset 0 -3px 0 #0003; }
.nk-pc.p1 { background: radial-gradient(circle at 35% 30%, #b8f0ff, #2aa6c9 50%, #0b5670); box-shadow: 0 3px 4px #000a, inset 0 -3px 0 #0003; }
.nk-pc.drop { animation: nk-drop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nk-drop { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.nk-pt.sel .nk-pc { box-shadow: 0 0 0 3px #fff, 0 0 14px 4px #ffffffaa; transform: scale(1.1); }
.nk-pt.can .nk-pc { box-shadow: 0 0 0 2px #ffc533aa, 0 3px 4px #000a; }
.nk-pt.takeable .nk-pc { animation: nk-shake .6s ease-in-out infinite; box-shadow: 0 0 0 3px #ff5c5c, 0 0 12px 3px #ff5c5caa; }
@keyframes nk-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.nk-pc.gone { animation: nk-gone .4s ease forwards; }
@keyframes nk-gone { to { transform: scale(0) rotate(90deg); opacity: 0; } }
.nk-fly { position: absolute; width: 12%; height: 12%; margin: -6% 0 0 -6%; z-index: 5; pointer-events: none; transition: left .3s ease-in-out, top .3s ease-in-out; }
.nk-board.busy .nk-pt { cursor: wait; }
.nk-tools { display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 40px; }