/* serpents.css */
.snl-box { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.snl-board {
  display: grid; grid-template-columns: repeat(10, 30px); grid-auto-rows: 30px;
  gap: 1px; background: var(--line); border: 2px solid var(--line); border-radius: 6px;
}
.snl-cell {
  position: relative; background: var(--bg-soft); font-size: 13px;
  display: grid; place-items: center;
}
.snl-cell:nth-child(odd) { background: #232a52; }
.snl-num { position: absolute; top: 1px; left: 2px; font-size: 7px; color: var(--text-soft); }
.snl-toks { position: absolute; bottom: 0; right: 0; display: flex; }
.snl-tok {
  width: 13px; height: 13px; border-radius: 50%; font-size: 8px; font-weight: 800;
  color: #10142e; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.3); margin-left: -3px;
}
.snl-last { text-align: center; min-height: 20px; }
@media (max-width: 360px) {
  .snl-board { grid-template-columns: repeat(10, 27px); grid-auto-rows: 27px; }
}