.tg-wrap { display: flex; justify-content: center; overflow: auto; padding: 12px; }
.tg-board { display: grid; gap: 4px; width: max-content; position: relative; }
.tg-cell {
  width: 42px; height: 42px; min-width: 42px; min-height: 42px;
  border-radius: 10px; background: var(--surface); border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 22px; cursor: pointer; position: relative;
  transition: background .12s ease;
}
.tg-cell:active { transform: scale(.95); }
.tg-badge {
  position: absolute; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  line-height: 1;
}
.tg-badge.r { right: -11px; top: 50%; transform: translateY(-50%); }
.tg-badge.b { bottom: -11px; left: 50%; transform: translateX(-50%); }
@media (max-width: 380px) {
  .tg-cell { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 19px; }
}