.su-grid {
    --cell: clamp(28px, 9vw, 42px);
    display: grid;
    grid-template-columns: repeat(9, var(--cell));
    grid-template-rows: repeat(9, var(--cell));
    gap: 0;
    width: max-content;
    margin: 0 auto 0.85rem;
    border: 2px solid rgba(255, 176, 32, 0.45);
    border-radius: 8px;
    overflow: hidden;
    background: #0a101c;
}
.su-cell {
    width: var(--cell);
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Orbitron, sans-serif;
    font-size: calc(var(--cell) * 0.45);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    color: #e8eefc;
}
.su-cell:nth-child(9n) { border-right: none; }
.su-cell:nth-child(n+73) { border-bottom: none; }
.su-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2px solid rgba(46, 230, 166, 0.35); }
.su-cell.box-b { border-bottom: 2px solid rgba(46, 230, 166, 0.35); }
.su-cell.given { color: var(--gp-mint, #2ee6a6); cursor: default; }
.su-cell.selected { background: rgba(255, 176, 32, 0.2); }
.su-cell.bad { color: #ff5c7a; }
.su-pad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    max-width: 280px;
    margin: 0 auto;
}
.su-pad button {
    border-radius: 10px;
    border: 1px solid rgba(255, 176, 32, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: #e8eefc;
    padding: 0.55rem 0;
    font-family: Orbitron, sans-serif;
    cursor: pointer;
}