/* Crosslink V172: one consistent design layer for menu pages and dialogs.
   Presentation only. Never change board coordinates, game state or API controls. */
:root{
  --clx-ink:#213754;--clx-sub:#526982;--clx-line:#d8e4ef;
  --clx-white:#fff;--clx-soft:#f5f9fe;--clx-gold:#ffcf3c;
  --clx-gold-edge:#dea81d;--clx-blue:#2473b9;
  --clx-shadow:0 9px 30px rgba(34,65,95,.09);
  --clx-radius:18px;
}
/* Shared typography and navigation: app pages, not live board artwork. */
body:not(.board-view) .cl-page,
body:not(.board-view) .cl-page button,
body:not(.board-view) .cl-page input,
body:not(.board-view) .cl-page select,
body:not(.board-view) .cl-page textarea{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;}
body:not(.board-view) .cl-page h1{font-size:clamp(25px,3vw,33px)!important;font-weight:850!important;letter-spacing:-.025em!important;line-height:1.2!important;}
body:not(.board-view) .cl-page h2,body:not(.board-view) .cl-page h3{letter-spacing:-.015em;line-height:1.3;color:var(--clx-ink)!important;}
body:not(.board-view) .cl-page .page-intro{max-width:760px;margin-inline:auto;line-height:1.6;color:var(--clx-sub)!important;}
body:not(.board-view) .cl-nav{gap:4px!important;box-shadow:0 6px 20px rgba(34,70,103,.09)!important;}
body:not(.board-view) .cl-nav button{transition:background .15s,color .15s,box-shadow .15s!important;}
/* Unified card treatment, without flattening nested forms or the game board. */
body:not(.board-view) .cl-page :is(.quick-play,.setup-collapse,.help-card,.dev-room,.piece-settings,.local-stats,.leaderboard-invite-setup){
  border-radius:var(--clx-radius)!important;box-shadow:var(--clx-shadow)!important;
}
body:not(.board-view) .cl-page :is(.setup-summary,.cl-option-group>summary){font-weight:780!important;}
body:not(.board-view) .cl-page .setup-summary{min-height:54px;gap:12px!important;}
body:not(.board-view) .cl-page :is(.player-choice-card,.leaderboard-invite-setup){border-radius:14px!important;}
/* Shared accessible form treatment across the navigation screens. */
body:not(.board-view) .cl-page :is(select,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea){
  box-sizing:border-box!important;min-height:44px;border:1.5px solid #bed1e4!important;
  border-radius:11px!important;background:#fff!important;color:var(--clx-ink)!important;
  padding:10px 13px!important;box-shadow:0 1px 3px rgba(30,60,90,.04)!important;
  transition:border-color .15s,box-shadow .15s!important;
}
body:not(.board-view) .cl-page select{padding-right:32px!important;cursor:pointer;}
body:not(.board-view) .cl-page :is(select,input,textarea):focus-visible{
  outline:2px solid #408ed0!important;outline-offset:2px!important;border-color:#408ed0!important;
}
body:not(.board-view) .cl-page button:not(:disabled){transition:filter .14s,box-shadow .14s,background-color .14s,border-color .14s!important;}
body:not(.board-view) .cl-page button:disabled{cursor:not-allowed!important;}
/* Settings: genuine three-part hierarchy inside the existing Sound & display card. */
body:not(.board-view) #view-settings #customiseDetails{
  border:1px solid var(--clx-line)!important;overflow:visible!important;
  border-radius:20px!important;box-shadow:var(--clx-shadow)!important;
}
body:not(.board-view) #view-settings #customiseDetails > .setup-summary{
  padding:19px 24px 17px!important;border-bottom:1px solid #e8eef5!important;
  background:linear-gradient(100deg,#fff,#f7fbff)!important;border-radius:20px 20px 0 0!important;
}
body:not(.board-view) #view-settings #customiseDetails .setup-summary-label{font-size:21px!important;letter-spacing:-.02em;}
body:not(.board-view) #view-settings #customiseDetails .customise-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:26px!important;align-items:start!important;padding:24px!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px 14px!important;align-content:start!important;min-width:0!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > .audio-title,
body:not(.board-view) #view-settings .clx-display-title{
  display:block!important;margin:0 0 2px!important;padding:0 0 11px!important;
  border-bottom:1px solid #e4edf5!important;font:800 15px/1.3 system-ui,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--clx-ink)!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > .audio-title{grid-column:1/-1!important;}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > label.audio-volume-label{
  display:flex!important;flex-direction:column!important;gap:8px!important;
  margin:0!important;color:var(--clx-ink)!important;font-size:13px!important;font-weight:650!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > label.audio-volume-label select{
  width:100%!important;min-width:0!important;min-height:46px!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel .audio-slider-row{
  display:flex!important;justify-content:space-between!important;align-items:center!important;gap:6px!important;
  min-width:0!important;white-space:nowrap!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-slider-value{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:44px!important;padding:4px 7px!important;border:1px solid #d7e6f7!important;
  border-radius:9px!important;background:#edf5ff!important;color:#214a7b!important;
  font-weight:800!important;font-size:12px!important;font-variant-numeric:tabular-nums!important;
}
body:not(.board-view) #view-settings #customiseDetails input[type=range]{
  display:block!important;width:100%!important;min-width:0!important;height:9px!important;
  border:0!important;border-radius:999px!important;outline:none!important;
  background:linear-gradient(to right,#7550d7 0%,#7550d7 var(--clx-fill,30%),#dce5f1 var(--clx-fill,30%),#dce5f1 100%)!important;
  appearance:none!important;-webkit-appearance:none!important;cursor:pointer!important;
  box-shadow:inset 0 1px 2px rgba(31,55,86,.1)!important;
}
body:not(.board-view) #view-settings #customiseDetails input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none!important;appearance:none!important;width:22px!important;height:22px!important;
  background:#fff!important;border:3px solid #754bda!important;border-radius:50%!important;
  box-shadow:0 2px 6px rgba(45,38,88,.23)!important;
}
body:not(.board-view) #view-settings #customiseDetails input[type=range]::-moz-range-thumb{
  width:17px!important;height:17px!important;background:#fff!important;
  border:3px solid #754bda!important;border-radius:50%!important;
  box-shadow:0 2px 6px rgba(45,38,88,.23)!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px!important;
  min-width:0!important;padding:0!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side>.clx-display-title{margin-bottom:1px!important;}
body:not(.board-view) #view-settings #customiseDetails .customise-side .toggle-card{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;margin:0!important;padding:13px 16px!important;border-radius:13px!important;
  min-height:52px!important;font-weight:700!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side .toggle-card input[type=checkbox]{
  width:19px!important;height:19px!important;accent-color:#2875b8!important;cursor:pointer!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side .control-block{margin:0!important;}
body:not(.board-view) #view-settings #customiseDetails .customise-side .control-block>label{
  color:var(--clx-ink)!important;font-size:13px!important;font-weight:700!important;margin-bottom:8px!important;
}
body:not(.board-view) #view-settings #customiseDetails .customise-side .move-hint{font-size:12px!important;line-height:1.45!important;margin-top:7px!important;}
/* Themes is a sibling to Audio/Display — a deliberate full-width section. */
body:not(.board-view) #view-settings #clThemesPanel{
  margin:0 24px 24px!important;padding:0!important;width:auto!important;
  background:linear-gradient(180deg,#fff,#fcfdff)!important;border:1px solid #d8e5f1!important;
  border-radius:16px!important;box-shadow:0 3px 10px rgba(30,65,95,.04)!important;
  overflow:hidden!important;
}
body:not(.board-view) #view-settings #clThemesPanel>summary{
  display:list-item!important;margin:0!important;padding:17px 20px!important;cursor:pointer!important;
  font-size:16px!important;font-weight:800!important;line-height:1.4!important;
  background:#f6faff!important;color:var(--clx-ink)!important;
  border-bottom:1px solid #e5eef6!important;
}
body:not(.board-view) #view-settings #clThemesPanel:not([open])>summary{border-bottom:0!important;}
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control{
  display:flex!important;align-items:center!important;gap:16px!important;
  flex-wrap:wrap!important;margin:0!important;padding:20px 20px 10px!important;
  font-size:14px!important;color:var(--clx-ink)!important;
}
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span{flex:0 0 158px!important;}
body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>select{flex:1 1 220px!important;width:auto!important;max-width:380px!important;min-width:0!important;}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings{
  margin:0!important;padding:10px 20px 18px!important;min-width:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker{
  display:flex!important;align-items:center!important;gap:12px!important;
  flex-wrap:wrap!important;justify-content:flex-start!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker>strong{
  flex:0 0 158px!important;font-size:14px!important;font-weight:700!important;
  line-height:1.4!important;color:var(--clx-ink)!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker>select{
  flex:0 1 240px!important;min-width:150px!important;max-width:100%!important;
}
/* Four illustrated colour choices must remain next to the actual chosen piece style. */
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-preferred-choices{
  display:inline-flex!important;align-items:center!important;flex-wrap:nowrap!important;
  gap:10px!important;margin:0!important;min-width:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-preferred-piece{
  background:#fff!important;border-color:#c7d6e5!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-preferred-piece.selected{
  border-color:#365576!important;box-shadow:0 0 0 1.5px #365576!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-hint,
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-status{
  padding:0 20px!important;max-width:760px!important;
  margin:0 0 8px!important;font-size:12px!important;line-height:1.5!important;color:var(--clx-sub)!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-status{margin-bottom:18px!important;}
/* Main Offline, Multiplayer and Help: consistent rhythm. */
body:not(.board-view) #view-play .setup-collapse{margin-bottom:18px!important;overflow:visible!important;}
body:not(.board-view) #view-play .player-choice-card{box-shadow:0 3px 10px rgba(38,62,87,.045)!important;}
body:not(.board-view) #view-online .dev-room{padding:clamp(18px,3vw,27px)!important;}
body:not(.board-view) #view-online #devEntry{gap:15px!important;}
body:not(.board-view) #view-online #devEntry label{font-size:14px!important;font-weight:750!important;}
body:not(.board-view) #view-online #devCreate{
  border:1px solid var(--clx-gold-edge)!important;border-radius:12px!important;
  background:var(--clx-gold)!important;color:#312405!important;
  min-height:50px!important;box-shadow:0 3px 0 #d3a225!important;
}
body:not(.board-view) #view-help .cl-help-columns{gap:18px!important;}
body:not(.board-view) #view-help .cl-help-columns>.help-card{padding:clamp(18px,2.6vw,26px)!important;}
body:not(.board-view) #view-help .help-card h2{font-size:clamp(19px,2.4vw,23px)!important;}
body:not(.board-view) #view-help #clHelpFeedbackForm :is(select,textarea){border-radius:11px!important;border:1.5px solid #bed1e4!important;}
body:not(.board-view) #view-help #clFeedbackSend{border-radius:12px!important;box-shadow:0 3px 0 #d3a225!important;}
/* In-game popups only: improve legibility, never move/hide roll controls or board geometry. */
body.board-view :is(.board-options-panel,.game-result-panel,.modal-card){
  border-radius:18px!important;box-shadow:0 20px 55px rgba(25,50,78,.22)!important;
}
body.board-view .board-options-panel :is(select,input:not([type=range])){
  min-height:40px;border-radius:10px!important;
}
body.board-view .game-result-panel :is(button,a){border-radius:11px!important;}
/* Mobile: no sideways overflow from settings or long account information. */
@media(max-width:780px){
 body:not(.board-view) #view-settings #customiseDetails .customise-grid{grid-template-columns:1fr!important;gap:24px!important;padding:18px!important;}
 body:not(.board-view) #view-settings #clThemesPanel{margin:0 18px 18px!important;}
 body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span{flex:0 0 125px!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker>strong{flex:0 0 125px!important;}
}
@media(max-width:540px){
 body:not(.board-view) #view-settings #customiseDetails .audio-panel{gap:17px 12px!important;}
 body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control{align-items:stretch!important;flex-direction:column!important;gap:8px!important;}
 body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>span{flex:0 0 auto!important;}
 body:not(.board-view) #view-settings #clThemesPanel>.cl-theme-control>select{width:100%!important;max-width:none!important;flex:auto!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker>strong{flex:0 0 100%!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .piece-style-picker>select{flex:1 1 100%!important;max-width:none!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-preferred-choices{width:100%!important;justify-content:center!important;}
}
@media(prefers-reduced-motion:reduce){
 body:not(.board-view) .cl-page :is(button,input,select,textarea){transition:none!important;}
}
/* V171's unified controls: preserve the live four-piece selector and smooth scaling. */
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-row{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex-wrap:wrap!important;gap:14px!important;min-height:58px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{
 flex:0 0 158px!important;font:700 14px/1.4 system-ui,sans-serif!important;
 color:var(--clx-ink)!important;margin:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice{
 flex:0 1 240px!important;width:240px!important;min-width:150px!important;max-width:100%!important;
 min-height:46px!important;height:46px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices{
 display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
 gap:12px!important;margin:0!important;padding:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices button.cl-preferred-piece.selected{
 border:1.5px solid #355475!important;box-shadow:0 0 0 1px rgba(53,84,117,.20)!important;
 transform:scale(1.10)!important;
}
@media(max-width:540px){
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{flex:0 0 100%!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice{width:100%!important;flex:1 1 100%!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices{width:100%!important;justify-content:center!important;flex-wrap:wrap!important;}
}


/* ===== Crosslink V173: stronger tidy-up and polished menu presentation ===== */
:root{
  --clx-page-max:1120px;
  --clx-card:#ffffff;
  --clx-card-soft:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --clx-header:linear-gradient(135deg,#fffef8 0%,#f4fbff 100%);
  --clx-glow:0 16px 42px rgba(27,54,82,.10);
  --clx-soft-glow:0 8px 22px rgba(27,54,82,.07);
}
body:not(.board-view){
  background:
    radial-gradient(circle at top left,rgba(255,226,154,.25),transparent 30%),
    radial-gradient(circle at top right,rgba(180,229,255,.25),transparent 34%),
    linear-gradient(145deg,#fffdf7 0%,#f2f8ff 100%)!important;
}
body:not(.board-view) .app{
  width:min(var(--clx-page-max),100%)!important;
  max-width:var(--clx-page-max)!important;
  padding:26px 20px 42px!important;
}
body:not(.board-view) .panel{
  display:block!important;
}
body:not(.board-view) .brand-header,
body:not(.board-view) .quick-play,
body:not(.board-view) .profile-bar,
body:not(.board-view) .support-actions,
body:not(.board-view) .piece-settings,
body:not(.board-view) .setup-collapse,
body:not(.board-view) .public-offline-lb,
body:not(.board-view) .game-log{
  border:1px solid #d9e5f0!important;
  border-radius:22px!important;
  background:var(--clx-card-soft)!important;
  box-shadow:var(--clx-glow)!important;
}
body:not(.board-view) .brand-header{padding:18px 18px 14px!important; overflow:hidden!important;}
body:not(.board-view) .profile-bar,
body:not(.board-view) .support-actions,
body:not(.board-view) .piece-settings,
body:not(.board-view) .quick-play,
body:not(.board-view) .public-offline-lb,
body:not(.board-view) .game-log,
body:not(.board-view) .setup-collapse{margin-top:18px!important;}
body:not(.board-view) .setup-collapse{overflow:hidden!important;}
body:not(.board-view) .setup-collapse > summary{
  padding:18px 22px!important;
  background:var(--clx-header)!important;
  border-bottom:1px solid #e6eef6!important;
}
body:not(.board-view) .setup-collapse .setup-summary-label{font-size:24px!important;font-weight:850!important;letter-spacing:-.025em!important;}
body:not(.board-view) .setup-collapse .setup-summary-hint{color:#5e738c!important;font-size:13px!important;margin-top:4px!important;}
body:not(.board-view) #setupDetails .setup-grid,
body:not(.board-view) #customiseDetails .customise-grid{padding:24px!important;}
body:not(.board-view) #setupDetails .setup-grid{gap:22px!important;}
body:not(.board-view) #customiseDetails .customise-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr)!important;
  gap:24px!important;
  align-items:start!important;
}
body:not(.board-view) #customiseDetails .audio-panel,
body:not(.board-view) #customiseDetails .customise-side{
  border:1px solid #dfe8f1!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--clx-soft-glow)!important;
  padding:18px!important;
}
body:not(.board-view) #customiseDetails .audio-panel{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px 16px!important;
}
body:not(.board-view) #customiseDetails .audio-title,
body:not(.board-view) #customiseDetails .clx-display-title{
  grid-column:1/-1!important;
  display:block!important;
  margin:0 0 2px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid #e8eef5!important;
  color:var(--clx-ink)!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
}
body:not(.board-view) #customiseDetails .customise-side{display:flex!important;flex-direction:column!important;gap:18px!important;}
body:not(.board-view) #customiseDetails .toggle-card{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;padding:14px 16px!important;border-radius:16px!important;
  background:linear-gradient(135deg,#f5fbff,#eef7ff)!important;border:1px solid #d6e5f4!important;
  font-weight:800!important;color:var(--clx-ink)!important;
}
body:not(.board-view) #customiseDetails .control-block{
  padding:14px 16px!important;border-radius:16px!important;border:1px solid #e0e8f2!important;
  background:#fbfdff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}
body:not(.board-view) #customiseDetails .control-block>label{display:block!important;margin:0 0 8px!important;font-size:14px!important;font-weight:800!important;color:var(--clx-ink)!important;}
body:not(.board-view) :is(select,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea){
  min-height:48px!important;border-radius:14px!important;border:1.5px solid #b9cde2!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  box-shadow:0 2px 6px rgba(32,61,92,.045)!important;
}
body:not(.board-view) select:hover,
body:not(.board-view) textarea:hover,
body:not(.board-view) input:not([type=checkbox]):not([type=radio]):not([type=range]):hover{border-color:#98bbda!important;}
body:not(.board-view) #customiseDetails input[type=range]{height:10px!important; background:linear-gradient(to right,#7a56dc 0%,#7a56dc var(--clx-fill,30%),#dfe6f0 var(--clx-fill,30%),#dfe6f0 100%)!important;}
body:not(.board-view) #customiseDetails input[type=range]::-webkit-slider-thumb{width:24px!important;height:24px!important;box-shadow:0 4px 12px rgba(53,48,112,.24)!important;}
body:not(.board-view) #customiseDetails input[type=range]::-moz-range-thumb{width:18px!important;height:18px!important;box-shadow:0 4px 12px rgba(53,48,112,.24)!important;}
body:not(.board-view) #customiseDetails .audio-slider-value{
  min-width:46px!important;padding:5px 8px!important;border-radius:10px!important;
  background:#edf4ff!important;border:1px solid #d8e6f5!important;color:#22456b!important;
}
body:not(.board-view) #clThemesPanel{
  margin:0 24px 24px!important;
  border:1px solid #d9e5f1!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fff,#fcfdff)!important;
  box-shadow:var(--clx-soft-glow)!important;
  overflow:hidden!important;
}
body:not(.board-view) #clThemesPanel>summary{
  padding:18px 20px!important;
  background:var(--clx-header)!important;
  border-bottom:1px solid #e6eef6!important;
  font-size:22px!important;font-weight:850!important;letter-spacing:-.02em!important;
}
body:not(.board-view) #clThemesPanel .cl-theme-control{
  display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;gap:10px 18px!important;
  align-items:center!important;padding:20px 20px 12px!important;margin:0!important;
}
body:not(.board-view) #clThemesPanel .cl-theme-control>span,
body:not(.board-view) #clThemesPanel .cl-piece-colour-title{font-size:15px!important;font-weight:800!important;color:var(--clx-ink)!important;}
body:not(.board-view) #clThemesPanel #pieceSettings{padding:4px 20px 10px!important;margin:0!important;}
body:not(.board-view) #clThemesPanel #pieceSettings .cl-piece-colour-row{
  display:grid!important;grid-template-columns:170px minmax(200px,260px) auto!important;
  gap:14px 18px!important;align-items:center!important;min-height:unset!important;
}
body:not(.board-view) #clThemesPanel #pieceSettings #pieceStyleChoice{width:100%!important;flex:0 1 auto!important;max-width:260px!important;}
body:not(.board-view) #clThemesPanel #pieceSettings .cl-piece-colour-choices{display:flex!important;gap:12px!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  border:1px solid #bfd0e2!important;box-shadow:0 0 0 1px #eef3f8!important,0 4px 10px rgba(28,52,80,.06)!important;
  transition:transform .25s cubic-bezier(.2,.65,.2,1),box-shadow .25s,border-color .25s!important;
}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece img{transition:transform .26s cubic-bezier(.2,.65,.2,1)!important;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece:hover{transform:translateY(-1px) scale(1.03)!important;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece.selected{transform:scale(1.10)!important;border:1.5px solid #365576!important;box-shadow:0 0 0 1px rgba(53,84,117,.16)!important,0 10px 18px rgba(24,49,75,.12)!important;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece.selected img{transform:scale(1.24)!important;}
body:not(.board-view) #clThemesPanel .cl-theme-hint,
body:not(.board-view) #clThemesPanel .cl-theme-status{padding:0 20px!important;color:#5d738c!important;font-size:12.5px!important;line-height:1.55!important;}
body:not(.board-view) #clThemesPanel .cl-theme-status{padding-bottom:18px!important;}
body:not(.board-view) .panel-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;justify-content:center!important;margin-top:22px!important;}
body:not(.board-view) .panel-actions button,
body:not(.board-view) .quick-play-actions button,
body:not(.board-view) .support-actions button,
body:not(.board-view) .support-actions a{
  min-height:48px!important;border-radius:14px!important;
  box-shadow:0 5px 0 rgba(140,107,18,.16)!important;
}
body:not(.board-view) .public-offline-lb-head{padding:0 0 8px!important;border-bottom:1px solid #e9eff6!important;margin-bottom:14px!important;}
body:not(.board-view) .public-offline-lb-title{font-size:24px!important;letter-spacing:-.02em!important;}
body:not(.board-view) .game-log{padding:20px!important;}
body:not(.board-view) .game-log-title{font-size:21px!important;font-weight:850!important;letter-spacing:-.02em!important;}
@media(max-width:980px){
  body:not(.board-view) #customiseDetails .customise-grid{grid-template-columns:1fr!important;}
  body:not(.board-view) #clThemesPanel .cl-theme-control{grid-template-columns:1fr!important;}
  body:not(.board-view) #clThemesPanel #pieceSettings .cl-piece-colour-row{grid-template-columns:1fr!important;}
}
@media(max-width:680px){
  body:not(.board-view) .app{padding:18px 12px 30px!important;}
  body:not(.board-view) #customiseDetails .audio-panel{grid-template-columns:1fr!important;}
  body:not(.board-view) #clThemesPanel{margin:0 12px 16px!important;}
  body:not(.board-view) #setupDetails .setup-grid,
  body:not(.board-view) #customiseDetails .customise-grid{padding:16px!important;}
}


/* ===== Crosslink V174: gamey / fancy global polish ===== */
:root{
  --clg-gold:#f2c744;
  --clg-gold-deep:#d7a31d;
  --clg-blue:#2c79d7;
  --clg-panel-edge:#d9e6f3;
  --clg-title-shadow:0 2px 0 rgba(255,255,255,.82),0 8px 18px rgba(27,54,82,.09);
}
body:not(.board-view){overflow-x:hidden;}
body:not(.board-view)::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
 background:radial-gradient(circle at 20% 10%,rgba(255,220,120,.14),transparent 22%),radial-gradient(circle at 80% 8%,rgba(113,188,255,.16),transparent 24%),radial-gradient(circle at 50% 85%,rgba(122,86,220,.10),transparent 24%);}
body:not(.board-view) .app{position:relative;z-index:1;}
body:not(.board-view) .brand-header,body:not(.board-view) .quick-play,body:not(.board-view) .profile-bar,body:not(.board-view) .support-actions,body:not(.board-view) .piece-settings,body:not(.board-view) .setup-collapse,body:not(.board-view) .public-offline-lb,body:not(.board-view) .game-log,body:not(.board-view) #clThemesPanel,body:not(.board-view) #customiseDetails .audio-panel,body:not(.board-view) #customiseDetails .customise-side{position:relative;overflow:hidden;}
body:not(.board-view) .brand-header::after,body:not(.board-view) .quick-play::after,body:not(.board-view) .profile-bar::after,body:not(.board-view) .support-actions::after,body:not(.board-view) .piece-settings::after,body:not(.board-view) .setup-collapse::after,body:not(.board-view) .public-offline-lb::after,body:not(.board-view) .game-log::after,body:not(.board-view) #clThemesPanel::after,body:not(.board-view) #customiseDetails .audio-panel::after,body:not(.board-view) #customiseDetails .customise-side::after{content:'';position:absolute;inset:auto -25% 100% auto;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0));transform:translateY(-30px) rotate(18deg);opacity:.32;pointer-events:none;}
body:not(.board-view) .brand-header:hover::after,body:not(.board-view) .quick-play:hover::after,body:not(.board-view) .profile-bar:hover::after,body:not(.board-view) .support-actions:hover::after,body:not(.board-view) .piece-settings:hover::after,body:not(.board-view) .setup-collapse:hover::after,body:not(.board-view) .public-offline-lb:hover::after,body:not(.board-view) .game-log:hover::after,body:not(.board-view) #clThemesPanel:hover::after,body:not(.board-view) #customiseDetails .audio-panel:hover::after,body:not(.board-view) #customiseDetails .customise-side:hover::after{animation:clxShineSweep 1.25s ease;}
@keyframes clxShineSweep{from{transform:translate(40px,-60px) rotate(18deg);opacity:0;}30%{opacity:.5;}to{transform:translate(-470px,240px) rotate(18deg);opacity:0;}}
@keyframes clxFadeLift{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:translateY(0) scale(1);}}
body.clx-effects-ready:not(.board-view) :is(.brand-header,.quick-play,.profile-bar,.support-actions,.piece-settings,.setup-collapse,.public-offline-lb,.game-log,#clThemesPanel,#customiseDetails .audio-panel,#customiseDetails .customise-side,.local-panel,.league,.leaderboard-challenges,.cl-account-card,#forms>section,.history-hero,.history-section,.history-feedback,.history-quotes,.history-stats){animation:clxFadeLift .55s cubic-bezier(.2,.75,.2,1) both;}
body.clx-effects-ready:not(.board-view) :is(.brand-header,.quick-play,.profile-bar,.support-actions,.piece-settings,.setup-collapse,.public-offline-lb,.game-log,#clThemesPanel,#customiseDetails .audio-panel,#customiseDetails .customise-side,.local-panel,.league,.leaderboard-challenges,.cl-account-card,#forms>section,.history-hero,.history-section,.history-feedback,.history-quotes,.history-stats):nth-child(2){animation-delay:.03s;}
body.clx-effects-ready:not(.board-view) :is(.brand-header,.quick-play,.profile-bar,.support-actions,.piece-settings,.setup-collapse,.public-offline-lb,.game-log,#clThemesPanel,#customiseDetails .audio-panel,#customiseDetails .customise-side,.local-panel,.league,.leaderboard-challenges,.cl-account-card,#forms>section,.history-hero,.history-section,.history-feedback,.history-quotes,.history-stats):nth-child(3){animation-delay:.07s;}
body:not(.board-view) .topnav button,body:not(.board-view) .menu-tabs button,body:not(.board-view) .mode-tab,body:not(.board-view) .rank-view,body:not(.board-view) .account-choice-nav button,body:not(.board-view) button,body:not(.board-view) .button,body:not(.board-view) a.button{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease,border-color .18s ease!important;}
body:not(.board-view) .topnav button:hover,body:not(.board-view) .menu-tabs button:hover,body:not(.board-view) .mode-tab:hover,body:not(.board-view) .rank-view:hover,body:not(.board-view) .account-choice-nav button:hover,body:not(.board-view) button:hover,body:not(.board-view) .button:hover,body:not(.board-view) a.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(38,61,88,.12)!important;filter:saturate(1.04);}
body:not(.board-view) .topnav button:active,body:not(.board-view) .menu-tabs button:active,body:not(.board-view) .mode-tab:active,body:not(.board-view) .rank-view:active,body:not(.board-view) .account-choice-nav button:active,body:not(.board-view) button:active,body:not(.board-view) .button:active,body:not(.board-view) a.button:active{transform:translateY(0) scale(.985);}
body:not(.board-view) .topnav{padding:10px 12px!important;border-radius:22px!important;background:linear-gradient(180deg,#ffffff,#f5f9fe)!important;box-shadow:0 14px 34px rgba(29,52,79,.09)!important;}
body:not(.board-view) .topnav button{border-radius:16px!important;min-height:48px!important;font-weight:850!important;letter-spacing:-.01em!important;box-shadow:0 3px 0 rgba(42,84,127,.10)!important;}
body:not(.board-view) h1,body:not(.board-view) h2,body:not(.board-view) h3,body:not(.board-view) .setup-summary-label,body:not(.board-view) .public-offline-lb-title,body:not(.board-view) .game-log-title{ text-shadow:var(--clg-title-shadow);} 
body:not(.board-view) .setup-collapse > summary,body:not(.board-view) #clThemesPanel>summary{background:linear-gradient(135deg,#fffef8 0%,#f8fbff 100%)!important;}
body:not(.board-view) :is(select,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea){transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;}
body:not(.board-view) :is(select,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea):focus{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(82,145,226,.13),0 8px 18px rgba(28,58,89,.08)!important;}
body:not(.board-view) select{background-image:linear-gradient(180deg,#ffffff,#fbfdff),linear-gradient(135deg,transparent 50%,#526d89 50%),linear-gradient(45deg,#526d89 50%,transparent 50%)!important;background-position:0 0,calc(100% - 20px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px)!important;background-size:100% 100%,7px 7px,7px 7px!important;background-repeat:no-repeat!important;padding-right:42px!important;}
body:not(.board-view) #customiseDetails input[type=range]{box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(93,89,161,.05)!important;}
body:not(.board-view) #customiseDetails input[type=range]::-webkit-slider-thumb{background:linear-gradient(180deg,#fff,#f4ecff)!important;border:2px solid #6b42dd!important;}
body:not(.board-view) #customiseDetails .audio-slider-value{font-weight:900!important;}
body:not(.board-view) .public-offline-lb-body .tablewrap tr:hover,body:not(.board-view) .tablewrap tbody tr:hover{background:rgba(242,247,255,.85)!important;transition:background .18s ease;}
body:not(.board-view) .support-actions button.primary,body:not(.board-view) .panel-actions .primary,body:not(.board-view) .quick-play-actions .primary,body:not(.board-view) button.primary{background:linear-gradient(180deg,#ffd957,#f1be2f)!important;border-color:#dbab24!important;color:#3b2a00!important;}
body:not(.board-view) .support-actions button.secondary,body:not(.board-view) .panel-actions .secondary,body:not(.board-view) .quick-play-actions .secondary,body:not(.board-view) button.secondary{background:linear-gradient(180deg,#f7fbff,#e8f1fb)!important;}
body:not(.board-view) .section-help,body:not(.board-view) .field-help,body:not(.board-view) .cl-theme-hint,body:not(.board-view) .cl-theme-status{color:#678099!important;}
body:not(.board-view) #clThemesPanel .cl-piece-colour-choices{padding:3px 0;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece{background:linear-gradient(180deg,#ffffff,#f7fbff)!important;}
body:not(.board-view) #clThemesPanel #pieceSettings button.cl-preferred-piece.selected{box-shadow:0 0 0 1px rgba(53,84,117,.16)!important,0 10px 18px rgba(24,49,75,.14)!important,0 0 18px rgba(74,137,219,.16)!important;}
body:not(.board-view) .support-actions .info-card,body:not(.board-view) .quick-play .helper-card,body:not(.board-view) .profile-bar .mini-card{border-radius:18px!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;border:1px solid #dfe9f3!important;box-shadow:0 8px 18px rgba(27,54,82,.06)!important;}


/* Crosslink V198: center Settings titles and keep Audio/Display matched */
body:not(.board-view) #view-settings #customiseDetails > .setup-summary,
body:not(.board-view) #view-settings #clThemesPanel > summary{
  text-align:center!important;
}
body:not(.board-view) #view-settings #customiseDetails > .setup-summary{
  justify-content:center!important;
}
body:not(.board-view) #view-settings #customiseDetails > .setup-summary .setup-summary-label,
body:not(.board-view) #view-settings #customiseDetails > .setup-summary .setup-summary-hint,
body:not(.board-view) #view-settings #clThemesPanel > summary{
  display:block!important;
  width:100%!important;
  text-align:center!important;
}
body:not(.board-view) #view-settings #customiseDetails > .setup-summary .setup-summary-hint{
  margin-top:4px!important;
}


/* Crosslink V199: tidy settings heading alignment and size */
body:not(.board-view) #view-settings #customiseDetails .audio-title,
body:not(.board-view) #view-settings #customiseDetails .clx-display-title{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:24px!important;
  margin:0!important;
  padding:0 0 12px!important;
  border-bottom:1px solid #e8eef5!important;
  color:var(--clx-ink)!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
  text-align:center!important;
}
body:not(.board-view) #view-settings #customiseDetails .audio-panel > .audio-title,
body:not(.board-view) #view-settings #customiseDetails .customise-side > .clx-display-title{
  width:100%!important;
}
body:not(.board-view) #view-settings #customiseDetails > .setup-summary .setup-summary-label,
body:not(.board-view) #view-settings #clThemesPanel > summary,
body:not(.board-view) #view-settings .theme-summary-title{
  text-align:center!important;
}
body:not(.board-view) #view-settings #clThemesPanel > summary{
  justify-content:center!important;
}
body:not(.board-view) #view-settings #clThemesPanel > summary .summary-title,
body:not(.board-view) #view-settings #clThemesPanel > summary .setup-summary-label{
  display:block!important;
  width:100%!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
  text-align:center!important;
}