.sk-scroll { overflow: auto; display: grid; place-items: center; }
.sk-grid { display: grid; gap: 0; touch-action: none; }
.sk-cell { border: 1px solid rgba(0,0,0,.04); display: grid; place-items: center; font-size: 20px; }
.sk-wall { background: #4a4368; border-color: #3a3458; }
.sk-floor { background: #f3eefb; }
.sk-target::after {
  content: ""; width: 34%; height: 34%; border-radius: 50%;
  background: var(--coral); opacity: .65;
}
.sk-box { background: #f3eefb; }
.sk-box > span { filter: none; }
.sk-box.on { background: #e6fbf2; }
.sk-box .bx { font-size: 1.4em; }
.sk-player .pl { font-size: 1.4em; }

.sk-dpad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-mid { display: flex; gap: 8px; }
.sk-btn {
  width: 58px; height: 58px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--surface); font-size: 22px; font-weight: 800; color: var(--grape);
}
.sk-btn:active { transform: scale(.93); background: #ece4ff; }