/* Crosslink V200 — compact, aligned Settings layout. No game logic changes. */
body:not(.board-view) #view-settings #customiseDetails .customise-grid {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:18px!important;
  padding:16px 20px 12px!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel,
body:not(.board-view) #view-settings #customiseDetails .customise-side {
  box-sizing:border-box!important;
  height:100%!important;
  min-width:0!important;
  border:1px solid #dfe8f1!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:16px 18px!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:auto auto auto!important;
  align-content:start!important;
  gap:18px 14px!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:14px!important;
}
/* Precisely matching headings; neither needs a separating rule. */
body:not(.board-view) #view-settings #customiseDetails .audio-panel>.audio-title,
body:not(.board-view) #view-settings #customiseDetails .customise-side>.clx-display-title {
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 auto!important;
  grid-column:1/-1!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  text-align:center!important;
  font:850 16px/24px system-ui,-apple-system,'Segoe UI',sans-serif!important;
  letter-spacing:0!important;
  color:var(--clx-ink)!important;
}
/* Remove nested display control cards, preserve normal select outlines/focus. */
body:not(.board-view) #view-settings #customiseDetails .customise-side>.toggle-card,
body:not(.board-view) #view-settings #customiseDetails .customise-side>.control-block {
  box-sizing:border-box!important;
  border:0!important;
  box-shadow:none!important;
  background:none!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  min-height:0!important;
  width:100%!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side>.toggle-card {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:10px 0!important;
  min-height:46px!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side>.control-block>label {
  display:block!important;
  margin:0 0 8px!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:750!important;
  text-align:left!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side>.control-block>select{
  display:block!important;
  width:100%!important;
  margin:0!important;
}
/* Tighten the gap above Themes once the nested boxes are gone. */
body:not(.board-view) #view-settings #clThemesPanel{
  margin:4px 20px 20px!important;
}
/* Centre both theme rows as coherent control groups, including swatches. */
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px 16px!important;
  padding:16px 18px 8px!important;
  margin:0!important;
  text-align:left!important;
}
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span {
  flex:0 0 160px!important;
  width:160px!important;
}
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>select {
  flex:0 1 380px!important;
  width:min(380px,100%)!important;
  max-width:380px!important;
  min-width:180px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings{
  box-sizing:border-box!important;
  padding:10px 18px 12px!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-row{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px 16px!important;
  width:100%!important;
  min-height:50px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{
  flex:0 0 160px!important;
  width:160px!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice{
  flex:0 1 240px!important;
  width:240px!important;
  max-width:240px!important;
  min-width:160px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-hint,
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-status{
  text-align:center!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:900px){
  body:not(.board-view) #view-settings #customiseDetails .customise-grid{
    grid-template-columns:1fr!important;
  }
  body:not(.board-view) #view-settings #customiseDetails .audio-panel,
  body:not(.board-view) #view-settings #customiseDetails .customise-side{height:auto!important;}
  body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span,
  body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{
    flex:0 0 auto!important;
    width:auto!important;
  }
}
@media(max-width:550px){
  body:not(.board-view) #view-settings #customiseDetails .customise-grid{padding:12px!important;}
  body:not(.board-view) #view-settings #customiseDetails .audio-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body:not(.board-view) #view-settings #clThemesPanel{margin:4px 12px 12px!important;}
  body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control,
  body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-row{
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:8px!important;
  }
  body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span,
  body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{
    flex:0 0 auto!important;width:100%!important;text-align:center!important;
  }
  body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>select,
  body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice{
    flex:0 0 auto!important;width:100%!important;max-width:none!important;min-width:0!important;
  }
  body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices{
    justify-content:center!important;flex-wrap:wrap!important;
  }
}

/* V231: Retire the redundant Audio panel in Sound & Display.
   layout.js moves both live volume sliders into Themes first; keep the
   legacy selectors in the DOM for game.js and saved preferences only.
   This wins over V200's display:grid!important rule. */
body:not(.board-view) #view-settings #customiseDetails .audio-panel,
body:not(.board-view) #view-settings #customiseDetails .audio-panel[hidden]{
  display:none!important;
}