/* Shared panel additions. /assets/site.css already styles #panel, .field, .lab, .val, .pbtn, #zoomrow, #tab and the
   #flavours / #names selectors (the ball page's own ids). The rules here make any other selector built by
   public/shared/js/panel.js look the same, and lay out sliders in the mobile bottom sheet. */
.panel-selector{display:flex;gap:6px}
.panel-selector button{flex:1;min-height:44px;padding:0 4px;border:1px solid var(--glass-border);border-radius:12px;
  background:rgba(255,255,255,.05);color:var(--glass-panel-text);cursor:pointer;touch-action:manipulation;
  font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  transition:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.panel-selector button[aria-pressed=true]{background:var(--cyan);color:var(--bg);border-color:var(--cyan);box-shadow:0 0 18px -2px rgba(5,217,232,.6)}
.panel-selector button[hidden]{display:none}
@media(hover:hover){.panel-selector button:hover{scale:1.04 .96}}
.panel-selector button:active{scale:.9 1.1}

@media(max-width:720px){
  /* selectors always take a full row; an odd last slider does too, so the two buttons below pair up */
  #panel .field:has(.panel-selector),#panel .field.odd{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .panel-selector button:hover,.panel-selector button:active{scale:none}
}