#sb-board { display: inline-flex; flex-direction: column; font-family: var(--mono); }
.sb-row { display: flex; align-items: center; }
.sb-row.rule { border-top: 2px solid var(--ink); margin-top: 3px; padding-top: 3px; }

.sb-cell, .sb-input {
    width: 42px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 2px;
    background: var(--surface);
    text-align: center;
    padding: 0;
}
.sb-cell.blank { visibility: hidden; }
.sb-cell.sign { width: 28px; border: none; background: none; color: var(--muted); justify-content: flex-start; }
.sb-cell.given { font-weight: 700; }

.sb-input { cursor: text; color: var(--ink); }
.sb-input:disabled { background: var(--surface-2); color: var(--border-strong); cursor: not-allowed; }
.sb-input.current { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.sb-input.filled-correct { background: #e8f8ef; border-color: var(--success); color: #136b3a; }
.sb-input.filled-wrong { background: #fdecec; border-color: var(--danger); }

.sb-badge-row .sb-cell, .sb-badge-row .sb-input {
    width: 42px;
    height: 26px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
}
.sb-badge-row.is-borrow .sb-cell, .sb-badge-row.is-borrow .sb-input { color: var(--danger); }

@media (max-width: 480px) {
    .sb-cell, .sb-input { width: 32px; height: 38px; font-size: 18px; margin: 1px; }
    .sb-cell.sign { width: 20px; }
    .sb-badge-row .sb-cell, .sb-badge-row .sb-input { width: 32px; height: 22px; font-size: 12px; }
}