/* Sliding Ball. Layout only; the ramp, ground, ruler and ball are drawn on the canvas, so the surface colours never come from CSS. */
.sb-stage{display:grid;gap:14px}
.kg-levels.sb-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.sb-level-name{display:block;font-size:.8em;opacity:.8}

.sb-status{margin:0}

.sb-scene{width:100%;max-width:640px;margin:0 auto;padding:6px;border-radius:20px;background:rgba(255,255,255,.06);box-sizing:border-box}
.sb-canvas{display:block;width:100%;height:auto;border-radius:14px}
.sb-canvas:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.sb-flag-label{margin:0;text-align:center;font-weight:800}

.sb-choices{display:grid;gap:12px;width:100%;max-width:640px;margin:0 auto}
.sb-group{margin:0;padding:0;border:0;min-width:0;display:grid;gap:8px}
.sb-group legend{padding:0;margin:0 0 4px;font-weight:800}
.sb-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.sb-option{display:grid;gap:2px;align-content:center;min-height:58px;padding:10px 8px;border:2px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.06);color:inherit;font:inherit;font-weight:800;text-align:center;cursor:pointer}
.sb-option small{font-size:.8em;font-weight:600;opacity:.8}
.sb-option[aria-pressed="true"]{border-color:#ffd54f;background:rgba(255,213,79,.18)}
.sb-option:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.sb-option[hidden]{display:none}

.sb-actions{justify-content:center}
.sb-win{display:grid;gap:8px;justify-items:center;text-align:center}
.sb-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.sb-howto{display:grid;gap:10px}
.sb-steps{margin:0;padding-left:1.3em;display:grid;gap:6px}
.sb-win[hidden]{display:none}