/* Marble Sort — interactive preview widget (marble-sort.js)
   Enqueue on Marble Sort level pages beside the shared sph-* styles. */

.marble-sort-preview-root{
  margin-top:18px;
  font-family:inherit;
}

/* control bar */
.marble-sort-preview-root .msp-bar{
  position:sticky;bottom:10px;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin:14px auto 16px;max-width:520px;
  background:rgba(13,19,48,.96);border:1px solid rgba(120,150,255,.35);
  border-radius:14px;padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.marble-sort-preview-root .msp-status{
  color:#cdd8ff;font-weight:600;font-size:15px;
}
.marble-sort-preview-root .msp-btns{display:flex;gap:8px;flex-wrap:wrap;}
.marble-sort-preview-root .msp-btns button{
  background:rgba(66,86,180,.35);color:#e6ecff;border:1px solid rgba(120,150,255,.45);
  border-radius:999px;padding:7px 18px;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .15s ease;
}
.marble-sort-preview-root .msp-btns button:hover{background:rgba(88,112,220,.55);color:#fff;}
.marble-sort-preview-root .msp-btns .msp-play{background:#3b6cf0;border-color:#3b6cf0;color:#fff;}

/* board */
.marble-sort-preview-root .msp-board{
  display:grid;gap:min(7px,1.5vw);justify-content:center;margin:0 auto 16px;
  padding:min(14px,2.5vw);background:rgba(10,16,44,.55);border-radius:16px;
  border:1px solid rgba(120,150,255,.18);width:100%;max-width:520px;
  box-sizing:border-box;
}
.marble-sort-preview-root .msp-cell{
  position:relative;width:100%;aspect-ratio:1/1;min-width:0;
  border-radius:18%;display:flex;align-items:center;justify-content:center;
}
.marble-sort-preview-root .msp-empty{background:transparent;}
.marble-sort-preview-root .msp-done{background:rgba(255,255,255,.05);}
.marble-sort-preview-root .msp-box{
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.35);
}
.marble-sort-preview-root .msp-hidden{
  background:#3c4966 !important;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25);
}
.marble-sort-preview-root .msp-front{outline:3px solid #fff;outline-offset:-1px;}
.marble-sort-preview-root .msp-dots{
  position:absolute;inset:9px;border-radius:8px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.4) 26%, transparent 30%);
  background-size:33.4% 33.4%;
}
.marble-sort-preview-root .msp-num{
  position:relative;z-index:2;color:#fff;font-weight:800;font-size:clamp(11px,3.2vw,20px);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.marble-sort-preview-root .msp-q{
  position:absolute;color:#cfd9f5;font-weight:800;font-size:clamp(13px,3.6vw,22px);
}
.marble-sort-preview-root .msp-hidden .msp-num{display:none;}
.marble-sort-preview-root .msp-stack{
  position:absolute;top:-5px;right:-5px;background:#22306b;color:#fff;
  font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(160,185,255,.5);z-index:3;
}

/* belt */
.marble-sort-preview-root .msp-beltwrap{
  display:flex;align-items:center;gap:10px;margin:0 auto 16px;max-width:560px;
}
.marble-sort-preview-root .msp-beltlabel,
.marble-sort-preview-root .msp-load{
  color:#9fb0e8;font-size:13px;font-weight:600;white-space:nowrap;
}
.marble-sort-preview-root .msp-belt{
  flex:1;display:flex;flex-wrap:wrap;gap:4px;min-height:30px;
  background:rgba(10,16,44,.55);border:1px solid rgba(120,150,255,.18);
  border-radius:999px;padding:6px 12px;
}
.marble-sort-preview-root .msp-belt i{
  width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);
}

/* customer lanes */
.marble-sort-preview-root .msp-lanes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:0 auto;
}
.marble-sort-preview-root .msp-lane{display:flex;flex-direction:column;gap:5px;}
.marble-sort-preview-root .msp-cust{
  height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);
}
.marble-sort-preview-root .msp-now{outline:2px solid #fff;outline-offset:-1px;}

@media (max-width:480px){
  .marble-sort-preview-root .msp-front{outline-width:2px;}
  .marble-sort-preview-root .msp-belt i{width:12px;height:12px;}
  .marble-sort-preview-root .msp-cust{height:24px;font-size:11px;}
}