/* Phase 3C-1 composer refinement: larger tactile number slots and explicit lock states. */
/* Keep the same ball geometry while exposing separate number and pin buttons. */
body.predictionLabPage .plBuild .plNumberChoice{
  display:grid;place-items:center;width:100%;height:100%;min-width:0;
  padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;
  font:inherit;cursor:pointer;
}
body.predictionLabPage .plBuild .plNumberChoice:focus-visible,
body.predictionLabPage .plBuild .plPin:focus-visible{
  outline:2px solid #8bd7ff;outline-offset:3px;
}
body.predictionLabPage .plBuild button.plPin{padding:0;color:#9bb4c4;cursor:pointer}

@media (min-width:1281px){
  body.predictionLabPage .plBuild .plComposer{grid-template-columns:minmax(0,1fr) 112px}
  body.predictionLabPage .plBuild .plComposerMain{padding:9px 10px 10px}
  body.predictionLabPage .plBuild .plComposerBonus{padding:9px 8px 10px}

  /* Let the five main-number slots occupy the full rail instead of clustering left. */
  body.predictionLabPage .plBuild .plBalls--composer{
    display:grid;
    grid-template-columns:repeat(5,minmax(48px,1fr));
    gap:10px;
    width:100%;
    min-height:60px;
    align-items:center;
  }
  body.predictionLabPage .plBuild .plBalls--composer .plBall{
    justify-self:center;
    width:52px;
    height:52px;
    flex-basis:52px;
    font-size:1rem;
    border-width:1.5px;
    position:relative;
    overflow:visible;
  }
  body.predictionLabPage .plBuild .plComposerBonus .plBall{
    width:52px;
    height:52px;
    flex-basis:52px;
    font-size:1rem;
    border-width:1.5px;
    position:relative;
    overflow:visible;
  }

  body.predictionLabPage .plBuild .plBall:not(.isEmpty){
    box-shadow:0 0 0 1px rgba(79,190,230,.18),0 0 15px rgba(29,139,188,.08);
  }
  body.predictionLabPage .plBuild .plBall.isPinned{
    border-color:#5ee0bd;
    box-shadow:0 0 0 1px rgba(94,224,189,.26),0 0 18px rgba(55,213,176,.16),inset 0 0 12px rgba(55,213,176,.05);
  }

  /* Explicit open/closed lock control replaces the old tiny pin marker. */
  body.predictionLabPage .plBuild .plPin{
    display:grid;
    place-items:center;
    position:absolute;
    right:-7px;
    bottom:-7px;
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid #3c6077;
    background:#081722;
    color:#9bb4c4;
    box-shadow:0 2px 7px rgba(0,0,0,.38);
    cursor:pointer;
    transition:transform .13s ease,border-color .13s ease,color .13s ease,background .13s ease,box-shadow .13s ease;
    z-index:6;
    padding:0;
    outline:none;
  }
  body.predictionLabPage .plBuild .plPin:hover,
  body.predictionLabPage .plBuild .plPin:focus-visible{
    transform:translateY(-1px) scale(1.06);
    border-color:#58bfe7;
    color:#d9f2ff;
    box-shadow:0 0 0 2px rgba(67,178,222,.14),0 3px 9px rgba(0,0,0,.4);
  }
  body.predictionLabPage .plBuild .plPin svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  body.predictionLabPage .plBuild .plBall.isPinned .plPin{
    border-color:#4bcdaa;
    background:#0c332e;
    color:#78efd0;
    box-shadow:0 0 0 1px rgba(72,213,174,.16),0 0 10px rgba(72,213,174,.2);
  }

  body.predictionLabPage .plBuild .plComposer small{margin-top:6px}
}

@media (max-width:1280px) and (min-width:901px){
  body.predictionLabPage .plBuild .plBalls--composer{gap:7px}
  body.predictionLabPage .plBuild .plBalls--composer .plBall,
  body.predictionLabPage .plBuild .plComposerBonus .plBall{width:46px;height:46px;flex-basis:46px}
}

@media (max-width:900px){
  body.predictionLabPage .plBuild .plPin{width:20px;height:20px;right:-5px;bottom:-6px}
  body.predictionLabPage .plBuild .plPin svg{width:11px;height:11px}
}