.settings-page { background:radial-gradient(ellipse at 18% 18%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 50%),var(--paper); }
.settings-header { flex-wrap:wrap; gap:14px; }
.settings-header .brand { margin-inline-end:auto; }
.settings-header .settings-back { min-height:44px; gap:8px; }
.settings-back > svg { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.settings-back > span { font-size:12px; line-height:1.4; }
.settings-main { position:relative; z-index:1; flex:1; width:min(100%,760px); margin:0 auto; padding:46px 34px 64px; }
.settings-card { min-width:0; padding:30px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 18px 42px var(--theme-shadow); }
.settings-heading { display:flex; align-items:center; gap:14px; min-width:0; margin-bottom:30px; }
.settings-icon { display:grid; place-items:center; flex:none; width:46px; height:46px; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:14px; background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); }
.settings-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.settings-heading h1 { min-width:0; margin:0; font-size:clamp(26px,5vw,34px); line-height:1.2; letter-spacing:-.7px; overflow-wrap:anywhere; }
.settings-language.language-control { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; border-top:1px solid var(--line); }
.settings-language > label { min-width:0; color:var(--ink); font-size:14px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.settings-language > select { flex:0 1 280px; width:280px; max-width:100%; min-width:0; min-height:48px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--theme-field); color:var(--ink); font:16px/1.5 var(--body); cursor:pointer; }
.settings-language > select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.settings-games { min-width:0; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.settings-games > h2 { margin:0; font-size:14px; font-weight:600; line-height:1.5; }
.settings-games-description { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.settings-games .advanced-game-options { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.settings-games .advanced-game-option { border-color:var(--line); background:var(--theme-field); }
.settings-games .advanced-game-option:hover,.settings-games .advanced-game-option:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.settings-games .advanced-game-option:has(input:disabled) { grid-column:1/-1; }
html[dir="rtl"] .settings-back > svg { transform:scaleX(-1); }
@media(max-width:600px) {
  .settings-header.site-header { display:flex; align-items:center; padding:20px; }
  .settings-main { padding:28px 20px 40px; }
  .settings-card { padding:24px 20px; }
  .settings-language.language-control { align-items:stretch; flex-direction:column; gap:12px; }
  .settings-language > select { flex:auto; width:100%; }
  .settings-games .advanced-game-options { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:380px) {
  .settings-header.site-header { padding:18px; }
  .settings-header .settings-back { padding-inline:12px; }
  .settings-main { padding-inline:15px; }
}