/* Test-only clean menus: no game layout or global responsive changes. */
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsLayout{display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;gap:14px!important;align-items:start!important;min-width:0!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs{display:flex!important;flex-direction:column!important;overflow:visible!important;gap:5px!important;margin:0!important;padding:4px!important;position:sticky!important;top:0!important;background:#182330!important;border-radius:12px!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button{display:block!important;flex:none!important;width:100%!important;text-align:left!important;white-space:normal!important;min-height:43px!important;font-size:14px!important;padding:10px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#dce5f2!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button[aria-selected=true]{background:#66509b!important;border-color:#a994ef!important;color:#fff!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsPanelWrap{min-width:0!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsPanel{min-width:0!important}
.darkCentralMenu{box-sizing:border-box!important;max-width:min(410px,calc(100vw - 24px))!important}
.darkCentralMenu .darkMenuGroup{margin-block:8px!important}
.darkCentralMenu .darkMenuItem{min-height:45px!important}
@media(max-width:650px){
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsLayout{grid-template-columns:105px minmax(0,1fr)!important;gap:8px!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button{font-size:12px!important;padding:10px 6px!important;min-height:48px!important;overflow-wrap:anywhere!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsPanel{padding:9px!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSiteFields{grid-template-columns:minmax(0,1fr)!important}
}
/* 20 Oct: compact menu and readable vertical settings navigation on narrow phones. */
html body dialog.darkCentralMenu{width:min(390px,calc(100vw - 28px))!important;max-height:calc(100dvh - 32px)!important;border-radius:17px!important}
html body .darkCentralMenu .darkMenuHead{padding:10px 14px!important}
html body .darkCentralMenu .darkMenuHead h2{font-size:19px!important}
html body .darkCentralMenu .darkMenuContent{padding:7px 12px 12px!important}
html body .darkCentralMenu .darkMenuGroup{margin:0 0 7px!important}
html body .darkCentralMenu .darkMenuGroup h3{margin:7px 3px 4px!important}
html body .darkCentralMenu .darkMenuItem{min-height:42px!important;padding:8px 10px!important;gap:9px!important;margin-bottom:4px!important;border-radius:11px!important;font-size:14px!important}
html body .darkCentralMenu .darkMenuIcon{width:26px!important;height:26px!important;flex-basis:26px!important}
@media(max-width:680px){
html body dialog.userSettingsBackdrop[open]>.userSettingsModal>.userSettingsBody{display:grid!important;grid-template-columns:140px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;min-width:0!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav{display:flex!important;grid-column:1!important;grid-row:1!important;flex-direction:column!important;flex-wrap:nowrap!important;width:140px!important;min-width:0!important;max-width:140px!important;height:100%!important;max-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;padding:8px 5px!important;gap:4px!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav>button{width:100%!important;min-width:0!important;max-width:100%!important;min-height:43px!important;height:auto!important;display:flex!important;gap:5px!important;padding:7px 5px!important;font-size:12px!important;line-height:1.2!important;overflow:hidden!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav>button b{font-size:12px!important;line-height:1.25!important;overflow-wrap:normal!important;word-break:normal!important;white-space:normal!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav>button>span{flex:0 0 18px!important;font-size:15px!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;overflow-x:hidden!important;overflow-y:auto!important;padding:10px!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent .membershipPlanGrid,html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent .darkDashboardQuick{grid-template-columns:minmax(0,1fr)!important}
html body dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent :is(.settingsPane,.settingsPane *, .darkDashboardQuick *){max-width:100%!important;overflow-wrap:break-word!important}
}
/* 20 Oct final pass: scoped menu readability; no game board geometry touched. */
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button:focus-visible,
.darkCentralMenu .darkMenuItem:focus-visible,
.userSettingsNav button:focus-visible{outline:2px solid #d6b7ff!important;outline-offset:2px!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button:hover{background:#293a50!important;color:#fff!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button[aria-selected=true]:hover{background:#66509b!important}
.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsPanelWrap :is(input,select,textarea){max-width:100%;box-sizing:border-box}
@media(min-width:701px){.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsLayout{grid-template-columns:190px minmax(0,1fr)!important}.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs{max-height:min(75vh,740px)!important;overflow-y:auto!important}}
@media(max-width:420px){.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsLayout{grid-template-columns:96px minmax(0,1fr)!important;gap:6px!important}.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsTabs button{font-size:11px!important;padding:8px 5px!important}.darkSiteDialog:not(.darkAuthorityDialog) .darkSettingsPanel{padding:7px!important}}
