/* Crosslink V125: align Piece style naturally with the Game Audio controls.
   Single stylesheet replaces V124 settings rules, avoiding conflicting overrides. */

/* The Sound & display section stays open, without disclosure arrow or subtitle. */
#view-settings #customiseDetails > summary { cursor:default!important; pointer-events:none!important; }
#view-settings #customiseDetails > summary::before,
#view-settings #customiseDetails > summary::after {display:none!important;content:none!important;}
#view-settings #customiseDetails > summary::-webkit-details-marker{display:none!important;}
#view-settings #customiseDetails > summary::marker{content:""!important;}
#view-settings #customiseDetails .setup-summary-hint{display:none!important;}

/* Organise the left audio column as 2 controls per row. */
body:not(.board-view) #view-settings #customiseDetails .audio-panel {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:18px!important;
  row-gap:18px!important;
  align-content:start!important;
  align-items:start!important;
  min-width:0!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > .audio-title{
  grid-column:1 / -1!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > label.audio-volume-label{
  min-width:0!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > label.audio-volume-label select,
body:not(.board-view) #view-settings #customiseDetails .audio-panel > label.audio-volume-label input{
  min-width:0!important;
  max-width:100%!important;
}

/* One unobtrusive control immediately underneath the two volume sliders. */
body:not(.board-view) #view-settings #customiseDetails .audio-panel > #pieceSettings{
  grid-column:1 / -1!important;
  display:block!important;
  margin:2px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  width:100%!important;
  min-width:0!important;
}
body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
  min-width:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line > strong{
  display:block!important;
  flex:0 0 auto!important;
  font:700 16px/1.4 system-ui,sans-serif!important;
  color:#405873!important;
  white-space:nowrap!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line > span{
  display:none!important;
}
body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line > select{
  display:block!important;
  box-sizing:border-box!important;
  flex:0 1 205px!important;
  width:205px!important;
  min-width:118px!important;
  max-width:100%!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line > img{
  display:block!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  object-fit:contain!important;
  margin:0!important;
}
@media(max-width:720px){
  body:not(.board-view) #view-settings #customiseDetails .audio-panel{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:12px!important;
    row-gap:14px!important;
  }
  body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line{
    gap:8px!important;
  }
  body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line > select{
    flex:1 1 0!important;width:auto!important;min-width:95px!important;
  }
}
@media(max-width:370px){
  body:not(.board-view) #view-settings #customiseDetails #pieceSettings label.piece-style-picker.cl-piece-single-line{
    flex-wrap:wrap!important;
  }
}
