/* Jewel Pop — game-specific */
.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:6px; min-height:0; }
.jewel-board {
  /* --cell & --gap are set from JS (sizeBoard) so the board fills the space and stays centred */
  --n: 8; --cell: 48px; --gap: 5px;
  position:relative;
  /* +10px = the two 5px borders (border-box), so the inner grid is exactly N*cell + (N+1)*gap and centres */
  width:  calc(var(--n) * var(--cell) + (var(--n) + 1) * var(--gap) + 10px);
  height: calc(var(--n) * var(--cell) + (var(--n) + 1) * var(--gap) + 10px);
  box-sizing:border-box; flex:none;
  background:#2c2540; border:5px solid var(--stroke); border-radius:18px; box-shadow:0 6px 0 var(--stroke);
  touch-action:none;
}

.jewel {
  position:absolute; width:var(--cell); height:var(--cell);
  left:0; top:0;
  transform: translate(
    calc(var(--gap) + var(--c) * (var(--cell) + var(--gap))),
    calc(var(--gap) + var(--r) * (var(--cell) + var(--gap)))
  );
  transition: transform 150ms ease;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.jewel .gem {
  width:84%; height:84%; border-radius:30% 30% 34% 34%/30%;
  border:3px solid var(--stroke); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cell) * 0.44);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18), inset 0 4px 0 rgba(255,255,255,0.32);
}
.jewel.sel .gem { outline:3px solid #fff; outline-offset:1px; transform:scale(1.06); }
.jewel.pop .gem { animation: gem-pop 160ms ease forwards; }
@keyframes gem-pop { to { transform:scale(0); opacity:0; } }