.bkbg-snk-wrap {
    padding: 28px 20px;
    border-radius: 16px;
    font-family: system-ui, -apple-system, sans-serif;
    text-align: center;
    box-sizing: border-box;
}
.bkbg-snk-title {
    font-family: var(--bksnk-tt-font-family, inherit);
    font-size: var(--bksnk-tt-font-size-d, 28px);
    font-weight: var(--bksnk-tt-font-weight, 800);
    font-style: var(--bksnk-tt-font-style, normal);
    text-transform: var(--bksnk-tt-text-transform, none);
    text-decoration: var(--bksnk-tt-text-decoration, none);
    line-height: var(--bksnk-tt-line-height-d, 1.2);
    letter-spacing: var(--bksnk-tt-letter-spacing-d, normal);
    word-spacing: var(--bksnk-tt-word-spacing-d, normal);
    margin: 0 0 4px;
}
.bkbg-snk-subtitle {
    font-family: var(--bksnk-st-font-family, inherit);
    font-size: var(--bksnk-st-font-size-d, 14px);
    font-weight: var(--bksnk-st-font-weight, 400);
    font-style: var(--bksnk-st-font-style, normal);
    text-transform: var(--bksnk-st-text-transform, none);
    text-decoration: var(--bksnk-st-text-decoration, none);
    line-height: var(--bksnk-st-line-height-d, 1.4);
    letter-spacing: var(--bksnk-st-letter-spacing-d, normal);
    word-spacing: var(--bksnk-st-word-spacing-d, normal);
    margin: 0 0 14px;
}

@media (max-width: 1024px) {
    .bkbg-snk-title {
        font-size: var(--bksnk-tt-font-size-t, var(--bksnk-tt-font-size-d, 28px));
        line-height: var(--bksnk-tt-line-height-t, var(--bksnk-tt-line-height-d, 1.2));
        letter-spacing: var(--bksnk-tt-letter-spacing-t, var(--bksnk-tt-letter-spacing-d, normal));
        word-spacing: var(--bksnk-tt-word-spacing-t, var(--bksnk-tt-word-spacing-d, normal));
    }
    .bkbg-snk-subtitle {
        font-size: var(--bksnk-st-font-size-t, var(--bksnk-st-font-size-d, 14px));
        line-height: var(--bksnk-st-line-height-t, var(--bksnk-st-line-height-d, 1.4));
        letter-spacing: var(--bksnk-st-letter-spacing-t, var(--bksnk-st-letter-spacing-d, normal));
        word-spacing: var(--bksnk-st-word-spacing-t, var(--bksnk-st-word-spacing-d, normal));
    }
}
@media (max-width: 767px) {
    .bkbg-snk-title {
        font-size: var(--bksnk-tt-font-size-m, var(--bksnk-tt-font-size-t, var(--bksnk-tt-font-size-d, 28px)));
        line-height: var(--bksnk-tt-line-height-m, var(--bksnk-tt-line-height-t, var(--bksnk-tt-line-height-d, 1.2)));
        letter-spacing: var(--bksnk-tt-letter-spacing-m, var(--bksnk-tt-letter-spacing-t, var(--bksnk-tt-letter-spacing-d, normal)));
        word-spacing: var(--bksnk-tt-word-spacing-m, var(--bksnk-tt-word-spacing-t, var(--bksnk-tt-word-spacing-d, normal)));
    }
    .bkbg-snk-subtitle {
        font-size: var(--bksnk-st-font-size-m, var(--bksnk-st-font-size-t, var(--bksnk-st-font-size-d, 14px)));
        line-height: var(--bksnk-st-line-height-m, var(--bksnk-st-line-height-t, var(--bksnk-st-line-height-d, 1.4)));
        letter-spacing: var(--bksnk-st-letter-spacing-m, var(--bksnk-st-letter-spacing-t, var(--bksnk-st-letter-spacing-d, normal)));
        word-spacing: var(--bksnk-st-word-spacing-m, var(--bksnk-st-word-spacing-t, var(--bksnk-st-word-spacing-d, normal)));
    }
}

.bkbg-snk-score-row {
    display: flex; justify-content: center; gap: 20px;
    margin-bottom: 12px; font-weight: 700;
}

.bkbg-snk-speed-row {
    display: flex; justify-content: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.bkbg-snk-speed-btn {
    padding: 4px 14px; border-radius: 20px; border: 2px solid;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.bkbg-snk-canvas-wrap {
    display: flex; justify-content: center; margin-bottom: 12px;
}
.bkbg-snk-canvas {
    border-radius: 10px;
    border: 2px solid;
    outline: none;
    display: block;
    max-width: 100%;
}

.bkbg-snk-controls {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-bottom: 14px;
}
.bkbg-snk-ctrl-row    { display: flex; gap: 6px; }
.bkbg-snk-ctrl-btn {
    width: 48px; height: 48px; border-radius: 8px; border: 2px solid;
    font-size: 20px; font-weight: 700; cursor: pointer;
    background: transparent;
    transition: background 0.15s, transform 0.1s;
}
.bkbg-snk-ctrl-btn:active { transform: scale(0.9); }

.bkbg-snk-actions {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.bkbg-snk-btn {
    padding: 10px 22px; border-radius: 10px; font-size: 14px;
    font-weight: 700; cursor: pointer; border: none; color: #fff;
    transition: opacity 0.2s, transform 0.1s;
}
.bkbg-snk-btn:hover  { opacity: 0.85; }
.bkbg-snk-btn:active { transform: scale(0.97); }
.bkbg-snk-btn-outline { background: transparent !important; border: 2px solid !important; }

.bkbg-snk-overlay {
    padding: 30px 20px; text-align: center;
    animation: bkbg-snk-fade-in 0.4s;
}
@keyframes bkbg-snk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bkbg-snk-overlay-emoji  { font-size: 52px; margin-bottom: 8px; }
.bkbg-snk-overlay-title  { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.bkbg-snk-overlay-score  { font-size: 16px; margin-bottom: 18px; }