/* =============================================================
   GAME: Nim
   ============================================================= */
.board-nim {
  --slot: min(calc((100vw - 104px) / 7), 46px);
  --nim-glow: #ff5a3d;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(100%, 440px); padding: 16px 12px 14px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 110, 70, .14), transparent 65%), linear-gradient(180deg, #2a0d1a, #1a0710);
  box-shadow: 0 0 0 2px var(--nim-glow), 0 0 26px rgba(255, 90, 61, .38), inset 0 0 40px rgba(0, 0, 0, .35);
}
.nim-rows { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nim-row { position: relative; }
/* soft shelf under each row */
.nim-row::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 3%; height: 4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.nim-row { display: flex; justify-content: center; gap: 0; }
.nim-stick {
  position: relative; width: var(--slot); height: calc(var(--slot) * 1.9); padding: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform .15s;
}
/* the matchstick: wooden body ... */
.nim-stick::before {
  content: ""; position: absolute; left: 50%; top: 13%; width: 17%; height: 80%; transform: translateX(-50%); border-radius: 3px 3px 4px 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(120, 70, 25, .14) 7px 8px),
    linear-gradient(90deg, #a8733d, #e9c48a 30%, #f6dcae 50%, #d6a568 78%, #96622f);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(80, 40, 10, .5);
  transition: background .15s, box-shadow .15s, opacity .2s;
}
/* ... and a glowing red head */
.nim-tip {
  position: absolute; top: 4%; left: 50%; width: 30%; height: 15%; transform: translateX(-50%); border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 38% 30%, #ffb3a0 0 12%, #ff3d3d 42%, #c4142b 75%, #7d0a1c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--nim-glow) 75%, transparent), inset 0 -2px 3px rgba(0, 0, 0, .3);
  pointer-events: none; transition: background .15s, box-shadow .15s, opacity .2s;
}
.nim-stick:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }

/* hover / focus preview: this stick and every stick to its right */
.board-nim:not(.nim-wait) .nim-stick:not(.gone):hover,
.board-nim:not(.nim-wait) .nim-stick:not(.gone):hover ~ .nim-stick:not(.gone) { transform: translateY(-4px); }
.board-nim:not(.nim-wait) .nim-stick:not(.gone):hover .nim-tip,
.board-nim:not(.nim-wait) .nim-stick:not(.gone):hover ~ .nim-stick:not(.gone) .nim-tip { box-shadow: 0 0 16px var(--nim-glow), 0 0 4px #fff; }

/* selected (about to be taken): lifted, outlined in the mover's colour, head burning bright */
.nim-stick.picked { transform: translateY(-8px); }
.board-nim[data-turn="1"] .nim-stick.picked::before, .nim-stick.cpu.p1::before { box-shadow: 0 0 0 1.5px var(--p1), 0 0 14px var(--p1), 0 6px 8px rgba(0, 0, 0, .45); }
.board-nim[data-turn="2"] .nim-stick.picked::before, .nim-stick.cpu.p2::before { box-shadow: 0 0 0 1.5px var(--p2), 0 0 14px var(--p2), 0 6px 8px rgba(0, 0, 0, .45); }
.nim-stick.picked .nim-tip, .nim-stick.cpu .nim-tip { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #ffd23f 45%, #ff5a3d 80%); box-shadow: 0 0 14px #ffb03d, 0 0 26px var(--nim-glow); }
.nim-stick.cpu { animation: nim-lift .5s ease-out both; }
@keyframes nim-lift { to { transform: translateY(-8px); } }

/* taken sticks leave a faint ghost so the row keeps its shape */
.nim-stick.gone { cursor: default; }
.nim-stick.gone::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 170, 120, .16); }
.nim-stick.gone .nim-tip { opacity: 0; }
/* just taken: lifted off the table with a little spin, then gone */
.nim-stick.just::before { animation: nim-off .5s cubic-bezier(.3, .1, .6, 1) backwards; }
.nim-stick.just .nim-tip { animation: nim-tipoff .5s cubic-bezier(.3, .1, .6, 1) backwards; }
@keyframes nim-off {
  from { opacity: 1; transform: translateX(-50%) translateY(-8px); background: linear-gradient(90deg, #a8733d, #e9c48a 30%, #f6dcae 50%, #d6a568 78%, #96622f); box-shadow: 0 0 12px rgba(255, 140, 50, .8); }
  to { opacity: 0; transform: translateX(-50%) translateY(-34px) rotate(-18deg); background: linear-gradient(90deg, #a8733d, #e9c48a 30%, #f6dcae 50%, #d6a568 78%, #96622f); }
}
@keyframes nim-tipoff {
  from { opacity: 1; transform: translateX(-50%) translateY(-8px); box-shadow: 0 0 18px #ffb03d, 0 0 30px var(--nim-glow); }
  to { opacity: 0; transform: translateX(-50%) translateY(-38px) translateX(-6px) scale(1.4); box-shadow: 0 0 30px #ffb03d; }
}
.nim-wait .nim-stick { cursor: default; }

.nim-hint { margin: 2px 0 0; min-height: 1.4em; color: var(--muted); font-size: .88rem; text-align: center; }
.nim-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nim-take { min-width: 140px; min-height: 44px; }
.nim-last { color: var(--muted); font-weight: 500; font-size: .9rem; }