.g32s-wrap{
  --g32s-border: rgba(0,0,0,.18);
  --g32s-border-strong: rgba(0,0,0,.35);
  --g32s-bg: rgba(255,255,255,.92);
  --g32s-card: rgba(255,255,255,.98);
  --g32s-text: rgba(0,0,0,.86);
  --g32s-muted: rgba(0,0,0,.55);
  --g32s-focus: rgba(0,0,0,.07);
  --g32s-bad: rgba(220,0,0,.16);

  color: var(--g32s-text);
  background: var(--g32s-card);
  border: 1px solid var(--g32s-border);
  border-radius: 16px;
  padding: 14px;
  max-width: 560px;
  margin: 14px auto;
}

.g32s-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.g32s-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

.g32s-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.g32s-label{
  display:flex;
  gap:8px;
  align-items:center;
  font-size: 13px;
  color: var(--g32s-muted);
}

.g32s-select{
  border:1px solid var(--g32s-border);
  border-radius: 10px;
  padding:6px 8px;
  background: var(--g32s-bg);
}

.g32s-btn{
  border:1px solid var(--g32s-border);
  border-radius: 10px;
  padding: 7px 10px;
  background: var(--g32s-bg);
  font-size: 13px;
  cursor:pointer;
  user-select:none;
}

.g32s-btn[aria-pressed="true"]{
  border-color: var(--g32s-border-strong);
  box-shadow: inset 0 0 0 1px var(--g32s-border-strong);
}

.g32s-toggle{
  display:flex;
  gap:8px;
  align-items:center;
  font-size: 13px;
  color: var(--g32s-muted);
  user-select:none;
}

.g32s-board{
  margin-top: 12px;
  border: 2px solid var(--g32s-border-strong);
  border-radius: 14px;
  overflow:hidden;
  background: var(--g32s-bg);
}

.g32s-grid{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
}

.g32s-cell{
  position:relative;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--g32s-border);
  font-size: 20px;
  font-weight: 650;
  cursor:pointer;
  user-select:none;
  background: transparent;
}

.g32s-cell.g32s-given{ font-weight: 800; }
.g32s-cell.g32s-selected{
  outline: 2px solid var(--g32s-border-strong);
  outline-offset: -2px;
}
.g32s-cell.g32s-focus{ background: var(--g32s-focus); }
.g32s-cell.g32s-bad{ background: var(--g32s-bad); }

.g32s-cell[data-r="2"], .g32s-cell[data-r="5"]{ border-bottom: 2px solid var(--g32s-border-strong); }
.g32s-cell[data-c="2"], .g32s-cell[data-c="5"]{ border-right: 2px solid var(--g32s-border-strong); }

.g32s-notes{
  position:absolute;
  inset: 3px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  font-size: 10px;
  font-weight: 600;
  color: var(--g32s-muted);
  pointer-events:none;
}
.g32s-notes span{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .92;
}

.g32s-pad{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.g32s-pad-btn{
  border:1px solid var(--g32s-border);
  border-radius: 12px;
  padding: 12px 8px;
  background: var(--g32s-bg);
  font-size: 16px;
  font-weight: 700;
  cursor:pointer;
  user-select:none;
}

.g32s-pad-btn-wide{ grid-column: span 2; }

.g32s-foot{
  margin-top: 10px;
  font-size: 13px;
  color: var(--g32s-muted);
  min-height: 18px;
}

@media (max-width: 520px){
  .g32s-wrap{ padding: 12px; border-radius: 14px; }
  .g32s-cell{ font-size: 18px; }
  .g32s-pad-btn{ padding: 12px 6px; }
}

.g32s-foot .g32s-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 6px;
  font-size: 13px;
  color: var(--g32s-muted);
}
.g32s-foot .g32s-status{
  margin-top: 6px;
  min-height: 18px;
  font-size: 13px;
  color: var(--g32s-muted);
}