/* Game Settings and Controls adopt the Friends drawer's royal-blue visual language.
   All selectors are scoped: loadouts, character customization and gameplay stay unchanged. */
#modal.social-settings-theme{
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
  background:#02132f99;
  backdrop-filter:blur(3px);
}
#modal.social-settings-theme>.modal-card{
  position:relative;
  width:min(540px,100%);
  max-width:100%;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  border-left:1px solid #7ab5ff5c;
  border-radius:0;
  background:linear-gradient(160deg,#084fc4 0%,#0740a8 30%,#0738a3 62%,#093ba4 100%);
  box-shadow:-14px 0 56px #020a2f84;
  color:#f7fbff;
  scrollbar-color:#88c9ff7a transparent;
  overscroll-behavior:contain;
}
#modal.social-settings-theme>.modal-card:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  z-index:2;
  width:7px;
  background:linear-gradient(180deg,#07236f,#0641a7 65%,#08378b);
  border-right:1px solid #3e82ee45;
  pointer-events:none;
}
#modal.social-settings-theme .modal-heading{
  position:sticky;
  top:0;
  z-index:3;
  min-height:109px;
  align-items:center;
  gap:14px;
  margin:0;
  padding:24px 22px 19px 28px;
  overflow:hidden;
  border-bottom:2px solid #2b76dfcc;
  background:radial-gradient(ellipse at 70% 20%,#4e76f26b,transparent 66%),linear-gradient(90deg,#0338a9,#04299c 78%,#02237f);
}
#modal.social-settings-theme .modal-heading:after{
  content:"F";
  position:absolute;
  right:77px;
  top:5px;
  font:950 italic 99px/1 system-ui,Arial,sans-serif;
  color:#8cbfff16;
  transform:rotate(-12deg);
  pointer-events:none;
}
#modal.social-settings-theme .modal-heading>div,
#modal.social-settings-theme .modal-heading button{position:relative;z-index:1}
#modal.social-settings-theme .modal-heading .eyebrow{
  color:#d0e7ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.075em;
}
#modal.social-settings-theme .modal-heading h2{
  margin:9px 0 0;
  color:#fff;
  font:950 italic clamp(25px,4vw,33px)/1.07 system-ui,Arial,sans-serif;
  letter-spacing:-1.1px;
  text-shadow:0 3px 1px #001c6e75;
}
#modal.social-settings-theme #closeModal{
  flex:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #88d9ff66;
  border-radius:7px;
  background:#124eac;
  color:#d7f7ff;
  font-size:17px;
  cursor:pointer;
}
#modal.social-settings-theme #closeModal:hover{background:#2c73df}
#modal.social-settings-theme #modalContent{
  min-width:0;
  padding:17px 20px 30px 27px;
  background:linear-gradient(180deg,#0649b6,#084ac0 47%,#0a46ad);
}
#modal.social-settings-theme .settings-grid{grid-template-columns:1fr;gap:10px}
#modal.social-settings-theme .setting-row{
  margin:0;
  padding:13px 14px 11px;
  border:1px solid #8cbfff5e;
  border-radius:8px;
  background:linear-gradient(100deg,#0b378d,#0c53b0);
}
#modal.social-settings-theme .setting-row>label,
#modal.social-settings-theme .crosshair-heading h3{
  color:#fff;
  font-weight:950;
  letter-spacing:.045em;
}
#modal.social-settings-theme .setting-row output{color:#a3eaff;font-variant-numeric:tabular-nums}
#modal.social-settings-theme .setting-row p,
#modal.social-settings-theme .crosshair-heading p,
#modal.social-settings-theme .crosshair-note{color:#c3dfff}
#modal.social-settings-theme input[type=range]{accent-color:#8feaff}
#modal.social-settings-theme .setting-row select,
#modal.social-settings-theme .voice-settings select{
  background:#082f86;
  color:#f6fbff;
  border:1px solid #8cbfff85;
  border-radius:6px;
}
#modal.social-settings-theme input[type=checkbox]{accent-color:#7ee8ff}
#modal.social-settings-theme .crosshair-settings,
#modal.social-settings-theme .private-voice-panel{
  border:1px solid #8cbfff5e;
  border-radius:8px;
  background:linear-gradient(100deg,#0b378d,#0c53b0);
}
#modal.social-settings-theme .crosshair-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
#modal.social-settings-theme .crosshair-preset,
#modal.social-settings-theme .crosshair-preview{
  border:1px solid #8cbfff72;
  border-radius:6px;
  background:linear-gradient(120deg,#0a296a,#0a3c91);
  color:#e7f6ff;
}
#modal.social-settings-theme .crosshair-preset:hover{background:#1558af;border-color:#c4edff}
#modal.social-settings-theme .crosshair-preset[aria-pressed=true]{background:#d6f5ff;border-color:#fff;color:#07378c}
#modal.social-settings-theme .crosshair-colors button{border-color:#082f86}
#modal.social-settings-theme .controller-binding-section{margin-top:30px;padding-top:24px;border-top:2px solid #89c9ff88}
#modal.social-settings-theme .binding-toolbar{
  align-items:flex-start;
  padding-bottom:11px;
  border-bottom:1px solid #77acfc69;
}
#modal.social-settings-theme .binding-toolbar strong{
  color:#fff;
  font-size:12px;
  font-weight:950;
  font-style:italic;
}
#modal.social-settings-theme .binding-toolbar small,
#modal.social-settings-theme .binding-head{color:#c3dfff}
#modal.social-settings-theme .binding-status,
#modal.social-settings-theme .control-tip{
  background:#082e81cc;
  border:1px solid #8cbfff5e;
  border-radius:8px;
  color:#d7eaff;
}
#modal.social-settings-theme .binding-status.listening{background:#0b58ad;border-color:#b9f4ff;color:#fff}
#modal.social-settings-theme .binding-group h3{
  margin-top:18px;
  padding:10px;
  border:0;
  border-bottom:1px solid #66a7f69a;
  border-radius:2px;
  background:linear-gradient(110deg,#03256e,#072c83 80%,#0d3a8b);
  color:#fff;
  font:950 italic 12px/1.2 system-ui,Arial,sans-serif;
  letter-spacing:.04em;
}
#modal.social-settings-theme .binding-row{border-bottom:1px solid #8abcff45}
#modal.social-settings-theme .binding-name{color:#f5fbff;font-weight:800}
#modal.social-settings-theme .binding-key,
#modal.social-settings-theme .binding-clear{
  border:1px solid #8cbfff6b;
  border-radius:6px;
  background:#082f86;
  color:#e9faff;
}
#modal.social-settings-theme .binding-key.unbound{background:#092772;color:#a8cafa}
#modal.social-settings-theme .binding-key.listening{background:#c6f5ff;color:#0b358a;border-color:#fff}
#modal.social-settings-theme .binding-clear{color:#b6ddff}
#modal.social-settings-theme .binding-reset,
#modal.social-settings-theme .settings-controls,
#modal.social-settings-theme .voice-settings>button,
#modal.social-settings-theme .voice-person button{
  border:1px solid #8cbfff85;
  border-radius:7px;
  background:linear-gradient(100deg,#0b378d,#0c53b0);
  color:#d1f3ff;
  font-weight:900;
}
#modal.social-settings-theme .voice-settings>button[aria-pressed=true]{background:#147e94;border-color:#8bf3ff;color:#fff}
#modal.social-settings-theme .voice-title{color:#d6f5ff}
#modal.social-settings-theme .voice-title small,
#modal.social-settings-theme .voice-settings label,
#modal.social-settings-theme .voice-hint{color:#c3dfff}
#modal.social-settings-theme .voice-person{background:#082e81bb}
#modal.social-settings-theme .control-tip strong{color:#fff}
#modal.social-settings-theme .primary{
  border:1px solid #d4f6ff;
  border-radius:7px;
  background:linear-gradient(100deg,#b1eaff,#e6f8ff);
  color:#082e79;
  box-shadow:0 6px 18px #03227055;
}
#modal.social-settings-theme .primary:hover{background:#fff}
#modal.social-settings-theme :is(button,input,select):focus-visible{outline:3px solid #f1ff8b;outline-offset:2px}
@media(max-width:540px){
  #modal.social-settings-theme>.modal-card{width:100%}
  #modal.social-settings-theme .modal-heading{min-height:91px;padding:16px 13px 14px 20px}
  #modal.social-settings-theme .modal-heading h2{font-size:27px}
  #modal.social-settings-theme #modalContent{padding:14px 12px 25px 19px}
  #modal.social-settings-theme .crosshair-settings{padding:12px}
  #modal.social-settings-theme .setting-row{padding:12px}
  #modal.social-settings-theme .binding-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:530px){
  #modal.social-settings-theme .modal-heading{min-height:67px;padding-block:9px}
  #modal.social-settings-theme .modal-heading h2{font-size:24px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){#modal.social-settings-theme .primary{transition:none}}

/* Full-screen category dashboard: the reference's compact left options and
   spacious right explanation, in Frostline's existing Friends List colors. */
#modal.social-settings-theme.settings-dashboard{justify-content:stretch;align-items:stretch;background:#041633e6}
#modal.social-settings-theme.settings-dashboard>.modal-card{
  display:flex;flex-direction:column;width:100%;height:100dvh;max-height:100dvh;overflow:hidden;
  border:0;border-radius:0;box-shadow:none;background:#0843aa;
}
#modal.social-settings-theme.settings-dashboard>.modal-card:before{display:none}
#modal.social-settings-theme.settings-dashboard .modal-heading{
  position:relative;flex:0 0 auto;min-height:76px;padding:12px clamp(18px,3vw,48px);
  background:linear-gradient(96deg,#081d51,#0b2975 48%,#09255f);
  border-bottom:1px solid #6d9de35c;
}
#modal.social-settings-theme.settings-dashboard .modal-heading:after{font-size:80px;right:100px;top:-8px}
#modal.social-settings-theme.settings-dashboard .modal-heading .eyebrow{font-size:9px;color:#8fbfff;letter-spacing:.18em}
#modal.social-settings-theme.settings-dashboard .modal-heading h2{
  margin:4px 0 0;font:950 italic clamp(24px,3vw,32px)/1 system-ui,Arial,sans-serif;letter-spacing:-.04em;
}
#modal.social-settings-theme.settings-dashboard #modalContent{
  flex:1 1 auto;display:flex;min-height:0;overflow:hidden;padding:0;background:#0650b7;
}
#modal.social-settings-theme.settings-dashboard .settings-screen{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
#modal.social-settings-theme.settings-dashboard .settings-tab-bar{
  display:flex;flex:0 0 auto;gap:3px;align-items:stretch;justify-content:space-between;min-height:81px;padding:0 clamp(12px,2vw,35px);
  overflow-x:auto;scrollbar-width:thin;scrollbar-color:#9acfff59 transparent;
  border-bottom:2px solid #75b9ff75;background:linear-gradient(90deg,#042978,#0744a5 62%,#063489);
}
#modal.social-settings-theme.settings-dashboard .settings-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1 0 auto;min-width:91px;max-width:156px;gap:6px;padding:8px 14px;border:0;border-radius:0;
  color:#a9c9f3;background:transparent;font-size:9px;font-weight:950;letter-spacing:.09em;
  transition:background .13s,color .13s;
}
#modal.social-settings-theme.settings-dashboard .settings-tab-icon{font-size:27px;line-height:1;font-family:system-ui,Arial,sans-serif}
#modal.social-settings-theme.settings-dashboard .settings-tab:hover{color:#fff;background:#4a86df47}
#modal.social-settings-theme.settings-dashboard .settings-tab.active{
  background:linear-gradient(180deg,#8cc7ff88,#5594e890);color:#fff;
  box-shadow:inset 0 -4px #b3eeff;
}
#modal.social-settings-theme.settings-dashboard .settings-workspace{flex:1 1 auto;display:grid;grid-template-columns:minmax(420px,53%) minmax(0,47%);min-height:0;overflow:hidden}
#modal.social-settings-theme.settings-dashboard .settings-list-pane{
  min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:27px clamp(17px,2.4vw,46px) 34px;
  background:linear-gradient(120deg,#0540a2,#0754b8 82%);
  scrollbar-color:#a1d4ff #0a4498;scrollbar-width:thin;
}
#modal.social-settings-theme.settings-dashboard .settings-pane-kicker{
  display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 2px 18px;margin-bottom:8px;
  border-bottom:1px solid #91c8ff55;color:#c4ddff;font-size:9px;font-weight:850;letter-spacing:.13em;
}
#modal.social-settings-theme.settings-dashboard .settings-pane-kicker strong{color:#e4f9ff;font-size:11px}
#modal.social-settings-theme.settings-dashboard .settings-option-group{margin:0 0 27px}
#modal.social-settings-theme.settings-dashboard .settings-option-group>h3{
  margin:0;padding:10px 2px 13px;color:#f1faff;background:none;border:0;
  font:950 italic clamp(16px,2vw,23px)/1.15 system-ui,Arial,sans-serif;letter-spacing:-.025em;
}
#modal.social-settings-theme.settings-dashboard .settings-option-rows{display:grid;gap:4px}
#modal.social-settings-theme.settings-dashboard .settings-option{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(160px,1.14fr);align-items:center;gap:10px;
  margin:0;min-height:58px;padding:5px 12px 5px 16px;
  border:1px solid #7abaff38;border-radius:2px;background:linear-gradient(90deg,#1a4aafdb,#0d3186ca);
  cursor:default;transition:background .14s,border-color .14s;
}
#modal.social-settings-theme.settings-dashboard .settings-option:hover,
#modal.social-settings-theme.settings-dashboard .settings-option.is-focused,
#modal.social-settings-theme.settings-dashboard .settings-option:focus-within{
  border-color:#8fddff99;background:linear-gradient(90deg,#2362c6,#1055b6);
}
#modal.social-settings-theme.settings-dashboard .settings-option>label:first-child{
  display:block;margin:0;color:#f2faff;font-size:12px;font-weight:950;letter-spacing:.025em;cursor:pointer;
}
#modal.social-settings-theme.settings-dashboard .settings-option-control{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
#modal.social-settings-theme.settings-dashboard .settings-option-control input[type=range]{
  width:100%;min-width:70px;height:20px;margin:0;accent-color:#7ce9ff;cursor:pointer;
}
#modal.social-settings-theme.settings-dashboard .settings-option-control output{
  flex:0 0 63px;min-width:63px;padding:11px 6px;border-left:1px solid #78b1fd55;
  color:#e8fbff;text-align:center;font-weight:950;font-size:12px;white-space:nowrap;
}
#modal.social-settings-theme.settings-dashboard .settings-option-control select{
  min-width:0;width:100%;max-width:240px;padding:10px 9px;text-align:center;
  border-radius:2px;border-color:#7dcaff88;background:#102e7f;font-size:11px;font-weight:950;
}
#modal.social-settings-theme.settings-dashboard .settings-toggle-control{
  display:flex;align-items:center;justify-content:space-between;gap:9px;max-width:195px;
  justify-self:end;width:100%;padding:8px 11px;border:1px solid #7dcaff66;border-radius:2px;
  background:#092979;color:#d1e8ff;font-size:12px;cursor:pointer;
}
#modal.social-settings-theme.settings-dashboard .settings-toggle-control input{width:18px;height:18px;accent-color:#73e8ff;cursor:pointer}
#modal.social-settings-theme.settings-dashboard .settings-toggle-control strong{font-weight:950;color:#e8faff}
#modal.social-settings-theme.settings-dashboard .settings-detail-pane{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  padding:clamp(30px,4vw,70px) clamp(22px,4vw,74px);
  border-left:1px solid #8cbfff70;
  background:radial-gradient(ellipse at 80% 47%,#3c8be65c,transparent 70%),linear-gradient(145deg,#1266ba,#0a4cac 65%,#074393);
}
#modal.social-settings-theme.settings-dashboard .settings-detail-eyebrow{font-size:10px;font-weight:950;letter-spacing:.18em;color:#9fe5ff}
#modal.social-settings-theme.settings-dashboard .settings-detail-pane h3{
  margin:15px 0 17px;color:#fff;font:950 italic clamp(33px,4vw,59px)/.97 system-ui,Arial,sans-serif;
  letter-spacing:-.055em;text-shadow:0 4px 12px #00377960;
}
#modal.social-settings-theme.settings-dashboard .settings-detail-pane p{margin:0;max-width:410px;color:#d8ebff;font-size:14px;line-height:1.65}
#modal.social-settings-theme.settings-dashboard .settings-detail-pane>small{
  position:relative;margin-top:auto;font-size:10px;font-weight:900;letter-spacing:.15em;color:#b9e8ff;
}
#modal.social-settings-theme.settings-dashboard .settings-detail-art{
  position:absolute;bottom:12%;right:-9%;width:min(34vw,430px);aspect-ratio:1;
  border:2px solid #b0edff20;border-radius:50%;box-shadow:0 0 0 36px #c7ebff0c,0 0 0 72px #7bd9ff09,0 0 95px #71deff18;
  pointer-events:none;opacity:.65;
}
#modal.social-settings-theme.settings-dashboard .settings-detail-art:before,
#modal.social-settings-theme.settings-dashboard .settings-detail-art:after{
  content:"";position:absolute;inset:18%;border:2px dashed #b0edff4a;border-radius:50%;
}
#modal.social-settings-theme.settings-dashboard .settings-detail-art:after{inset:39%;border-style:solid}
#modal.social-settings-theme.settings-dashboard .settings-detail-art>b{
  position:absolute;inset:0;display:grid;place-items:center;color:#a0ddff28;
  font:950 italic clamp(90px,12vw,210px)/1 system-ui,Arial,sans-serif;transform:rotate(-12deg);
}
#modal.social-settings-theme.settings-dashboard .settings-screen-footer{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:69px;
  padding:9px clamp(17px,2.3vw,42px);border-top:1px solid #7eb8ff7a;
  background:linear-gradient(90deg,#071d57,#092d75);color:#9bc5f4;font-size:10px;font-weight:900;letter-spacing:.12em;
}
#modal.social-settings-theme.settings-dashboard .settings-screen-footer>div{display:flex;align-items:center;gap:10px}
#modal.social-settings-theme.settings-dashboard .settings-screen-footer .primary,
#modal.social-settings-theme.settings-dashboard .settings-footer-secondary{
  display:inline-flex;justify-content:space-between;align-items:center;gap:22px;
  width:auto;min-height:39px;margin:0;padding:10px 16px;border:1px solid #87c6ff8a;
  border-radius:4px;background:#194c9a;color:#e0f5ff;box-shadow:none;
  font-size:10px;font-weight:950;letter-spacing:.06em;
}
#modal.social-settings-theme.settings-dashboard .settings-screen-footer .primary{background:#b7efff;color:#092e7a;border-color:#e8faff}
#modal.social-settings-theme.settings-dashboard .settings-screen-footer .primary:hover{transform:none;background:#fff}
#modal.social-settings-theme.settings-dashboard .settings-bindings-card{
  padding:24px;border:1px solid #9acfff6b;border-radius:4px;background:#0b348f;
}
#modal.social-settings-theme.settings-dashboard .settings-bindings-card strong{font-size:17px;font-weight:950;color:#fff}
#modal.social-settings-theme.settings-dashboard .settings-bindings-card p{line-height:1.55;font-size:12px;color:#c5e1ff}
#modal.social-settings-theme.settings-dashboard .settings-bindings-card .settings-controls{
  display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:20px;padding:13px;
}
#modal.social-settings-theme.settings-dashboard .crosshair-settings{
  padding:16px;margin:0;border-color:#98cfff8c;background:#0b368e;
}
#modal.social-settings-theme.settings-dashboard .private-voice-panel{
  padding:15px;margin:0;border-color:#98cfff8c;background:#0b368e;
}
@media(max-width:900px){
 #modal.social-settings-theme.settings-dashboard .settings-workspace{grid-template-columns:minmax(0,1fr)}
 #modal.social-settings-theme.settings-dashboard .settings-detail-pane{display:none}
 #modal.social-settings-theme.settings-dashboard .settings-list-pane{padding:17px clamp(13px,3vw,30px) 24px}
 #modal.social-settings-theme.settings-dashboard .settings-tab{min-width:88px;padding-inline:9px}
 #modal.social-settings-theme.settings-dashboard .settings-screen-footer>span{display:none}
 #modal.social-settings-theme.settings-dashboard .settings-screen-footer{justify-content:flex-end}
}
@media(max-width:540px){
 #modal.social-settings-theme.settings-dashboard .modal-heading{min-height:60px;padding:10px 17px}
 #modal.social-settings-theme.settings-dashboard .modal-heading h2{font-size:25px}
 #modal.social-settings-theme.settings-dashboard .settings-tab-bar{min-height:67px;padding:0 7px;gap:0}
 #modal.social-settings-theme.settings-dashboard .settings-tab{min-width:76px;gap:4px;font-size:8px}
 #modal.social-settings-theme.settings-dashboard .settings-tab-icon{font-size:22px}
 #modal.social-settings-theme.settings-dashboard .settings-option{grid-template-columns:minmax(105px,1fr) minmax(125px,1.15fr);padding:7px 9px;gap:6px;min-height:53px}
 #modal.social-settings-theme.settings-dashboard .settings-option>label:first-child{font-size:10px}
 #modal.social-settings-theme.settings-dashboard .settings-option-control{gap:6px}
 #modal.social-settings-theme.settings-dashboard .settings-option-control output{flex-basis:55px;min-width:55px;font-size:10px;padding-inline:3px}
 #modal.social-settings-theme.settings-dashboard .settings-screen-footer{min-height:60px;padding:7px 10px}
 #modal.social-settings-theme.settings-dashboard .settings-screen-footer .primary,
 #modal.social-settings-theme.settings-dashboard .settings-footer-secondary{padding:9px 10px;gap:10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 #modal.social-settings-theme.settings-dashboard .settings-tab,
 #modal.social-settings-theme.settings-dashboard .settings-option{transition:none}
}