.sc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.sc-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  background: #1a2130;
  padding: 12px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 3px var(--color-border);
}

.sc-node {
  border: none;
  border-radius: var(--radius-md);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  filter: brightness(0.55) saturate(0.7);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.sc-node--lit { filter: brightness(1.25) saturate(1.2); transform: scale(0.97); }
.sc-node:disabled { cursor: default; }
.sc-node__key {
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 6px;
}

.sc-node--0 { background: #ef5350; border-radius: var(--radius-lg) 6px 6px 6px; }
.sc-node--1 { background: #ffca28; border-radius: 6px var(--radius-lg) 6px 6px; }
.sc-node--2 { background: #42a5f5; border-radius: 6px 6px 6px var(--radius-lg); }
.sc-node--3 { background: #66bb6a; border-radius: 6px 6px var(--radius-lg) 6px; }

.sc-status {
  font-weight: 800;
  color: var(--color-text-soft);
  min-height: 1.4em;
}