/* Настройки (12.10.2026). Рамки — tc-cut (ctsection/ctbtn), единицы — холст 1600×900 (--vs), фон — город итога боя. */
.app > main:has(> .st-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .st-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.st-screen { width:100%; max-width:none; margin:0; color:#edf6ff; }  /* общее правило section{max-width:1280px} сужало экран на 1920 */
.st-screen :is(h1,h2,p,dl,dd,dt) { margin:0; }
.st-desktop { height:100%; }
.st-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; height:100%; padding:calc(34 * var(--vs)) calc(56 * var(--vs)); background:#02070d url('/app/client/assets/ui/settings/settings-bg.jpg') 50% 50% / cover no-repeat; overflow:auto; }
/* фон владельца «серверная над городом» (12.10.2026): слева и в центре уже тёмный — лёгкое затемнение, окно и стойки справа видны */
.st-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#02070d80 0%,#02070d4d 55%,transparent 80%),linear-gradient(180deg,transparent 60%,#02070d99); }
.st-scene > * { position:relative; }

.st-heading { padding:calc(4 * var(--vs)) calc(16 * var(--vs)); border-left:2px solid #2b9fd6; margin-bottom:calc(26 * var(--vs)); text-shadow:0 2px 8px #000; }
.st-heading p { color:#5fd0ff; font-size:calc(13 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.st-heading h1 { margin-top:calc(6 * var(--vs)); font-size:calc(40 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }

.st-grid { display:grid; grid-template-columns:repeat(2,calc(640 * var(--vs))); gap:calc(28 * var(--vs)); align-items:start; }
.st-col { display:flex; flex-direction:column; gap:calc(20 * var(--vs)); }
.st-section { position:relative; isolation:isolate; width:100%; }
.st-section > .tc-cut-body { position:relative; inset:auto; padding:calc(16 * var(--vs)) calc(30 * var(--vs)) calc(24 * var(--vs)) calc(34 * var(--vs)); }
.st-section > .tc-cut-glass { background:linear-gradient(180deg,rgba(8,22,31,.9),rgba(3,10,16,.94)); }
.st-section-title { height:calc(36 * var(--vs)); margin-bottom:calc(26 * var(--vs)) !important; color:#7fe6ff; font-size:calc(15 * var(--vs)); font-weight:850; letter-spacing:.2em; line-height:calc(36 * var(--vs)); }

/* язык: две кнопки */
.st-segment { display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--vs)); }
.st-seg { position:relative; display:grid; place-items:center; height:calc(52 * var(--vs)); border:1px solid #1d5a78; background:linear-gradient(180deg,#0a1c28,#06111a); clip-path:polygon(calc(14 * var(--vs)) 0,100% 0,100% calc(100% - 14 * var(--vs)),calc(100% - 14 * var(--vs)) 100%,0 100%,0 calc(14 * var(--vs))); color:#9fbccc; font-size:calc(16 * var(--vs)); font-weight:850; letter-spacing:.14em; cursor:pointer; transition:background .15s,color .15s; }
.st-seg input { position:absolute; opacity:0; pointer-events:none; }
.st-seg:hover { color:#fff; background:linear-gradient(180deg,#0e2636,#081723); }
.st-seg.on { border-color:#1ea7ff; background:linear-gradient(180deg,#0f3b58,#0a2436); color:#fff; box-shadow:inset 0 0 calc(16 * var(--vs)) rgba(30,167,255,.35); text-shadow:0 0 10px rgba(79,214,255,.7); }
.st-seg:focus-within { outline:1px solid #7fe6ff; outline-offset:2px; }

/* строки с тумблерами */
.st-row { display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--vs)); min-height:calc(56 * var(--vs)); padding:calc(8 * var(--vs)) 0; border-top:1px solid #12384d; cursor:pointer; }
.st-section-title + .st-row { border-top:0; }
.st-row-copy { display:flex; flex-direction:column; gap:calc(3 * var(--vs)); }
.st-row-copy b { font-size:calc(18 * var(--vs)); font-weight:750; }
.st-row-copy small { color:#8fb0c2; font-size:calc(13 * var(--vs)); }
.st-row { position:relative; }
.st-switch { position:absolute; opacity:0; width:1px; height:1px; }
.st-row > i { position:relative; flex:none; width:calc(62 * var(--vs)); height:calc(30 * var(--vs)); border:1px solid #2a5870; border-radius:calc(15 * var(--vs)); background:#06111a; transition:background .15s,border-color .15s; }
.st-row > i::after { content:""; position:absolute; top:calc(3 * var(--vs)); left:calc(3 * var(--vs)); width:calc(22 * var(--vs)); height:calc(22 * var(--vs)); border-radius:50%; background:#5d7484; transition:transform .15s,background .15s; }
.st-switch:checked + i { border-color:#1ea7ff; background:#0b3550; box-shadow:0 0 calc(12 * var(--vs)) rgba(30,167,255,.45); }
.st-switch:checked + i::after { transform:translateX(calc(32 * var(--vs))); background:#7fe6ff; box-shadow:0 0 calc(10 * var(--vs)) #4fd6ff; }
.st-switch:focus-visible + i { outline:1px solid #7fe6ff; outline-offset:3px; }
.st-note { margin-top:calc(8 * var(--vs)) !important; color:#7d98a8; font-size:calc(13 * var(--vs)); line-height:1.4; }

/* Громкость внутри существующей звуковой рамки; тумблеры и остальные разделы сохранены. */
.st-sound > .tc-cut-body { padding-bottom:calc(20 * var(--vs)); }
.st-sound .st-section-title { margin-bottom:calc(18 * var(--vs)) !important; }
.st-audio-control + .st-audio-control { margin-top:calc(8 * var(--vs)); border-top:1px solid #12384d; }
.st-audio-control > .st-row { border-top:0; min-height:calc(44 * var(--vs)); }
.st-volume { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:calc(4 * var(--vs)) calc(12 * var(--vs)); padding-bottom:calc(4 * var(--vs)); }
.st-volume-label { color:#8fb0c2; font-size:calc(13 * var(--vs)); }
.st-volume output { color:#7fe6ff; font-size:calc(15 * var(--vs)); font-weight:800; font-variant-numeric:tabular-nums; min-width:4ch; text-align:right; }
.st-volume-range { grid-column:1 / -1; appearance:none; width:100%; min-width:0; height:calc(30 * var(--vs)); margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.st-volume-range::-webkit-slider-runnable-track { height:calc(6 * var(--vs)); border:1px solid #2a5870; border-radius:3px; background:linear-gradient(90deg,#38cce8 0 var(--level),#071722 var(--level) 100%); }
.st-volume-range::-webkit-slider-thumb { appearance:none; width:calc(16 * var(--vs)); height:calc(18 * var(--vs)); margin-top:calc(-7 * var(--vs)); border:1px solid #9befff; border-radius:2px; background:linear-gradient(180deg,#c8f8ff,#269fc5); box-shadow:0 0 calc(8 * var(--vs)) #24b6dd55; }
.st-volume-range::-moz-range-track { height:calc(6 * var(--vs)); border:1px solid #2a5870; border-radius:3px; background:linear-gradient(90deg,#38cce8 0 var(--level),#071722 var(--level) 100%); }
.st-volume-range::-moz-range-thumb { width:calc(16 * var(--vs)); height:calc(18 * var(--vs)); border:1px solid #9befff; border-radius:2px; background:linear-gradient(180deg,#c8f8ff,#269fc5); box-shadow:0 0 calc(8 * var(--vs)) #24b6dd55; }
.st-volume-range:focus-visible { outline:1px solid #7fe6ff; outline-offset:2px; }
.st-audio-control.muted .st-volume { opacity:.45; }
.st-volume-range:disabled { cursor:default; }

/* аккаунт */
.st-account { display:flex; flex-direction:column; }
.st-account > div { display:flex; align-items:center; justify-content:space-between; gap:calc(14 * var(--vs)); min-height:calc(54 * var(--vs)); border-top:1px solid #12384d; }
.st-account > div:first-child { border-top:0; }
.st-account dt { color:#8fb0c2; font-size:calc(14 * var(--vs)); letter-spacing:.06em; }
.st-account dd { font-size:calc(18 * var(--vs)); font-weight:800; }
.st-id { display:flex; align-items:center; gap:calc(12 * var(--vs)); min-width:0; }
.st-id code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:calc(300 * var(--vs)); color:#dff6ff; font-family:inherit; font-size:calc(16 * var(--vs)); letter-spacing:.04em; }
.st-copy { flex:none; padding:calc(7 * var(--vs)) calc(12 * var(--vs)); border:1px solid #1ea7ff; background:#0a2334; color:#fff; font-size:calc(12 * var(--vs)); font-weight:850; letter-spacing:.12em; cursor:pointer; }
.st-copy:hover { background:#0f3b58; }
.st-copy.done { border-color:#3be39a; color:#bfffe0; }
.st-hint { margin:calc(10 * var(--vs)) 0 calc(18 * var(--vs)) !important; color:#7d98a8; font-size:calc(13 * var(--vs)); line-height:1.4; }
.st-btn { position:relative; isolation:isolate; display:block; width:calc(360 * var(--vs)); height:calc(56 * var(--vs)); padding:0; border:0; background:none; color:#fff; font-size:calc(16 * var(--vs)); font-weight:850; letter-spacing:.12em; cursor:pointer; }
.st-btn > .tc-cut-body { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.st-btn:hover { filter:brightness(1.18); }
.st-version { padding-left:calc(6 * var(--vs)); color:#5f7a8a; font-size:calc(12 * var(--vs)); letter-spacing:.08em; }

/* телефон и узкие окна */
.st-mobile .st-scene { --vs:1px; height:auto; min-height:100%; padding:20px 12px 28px; background-size:auto 100%; background-position:72% 0; overflow:visible; }
.st-mobile .st-heading h1 { font-size:30px; }
.st-mobile .st-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
.st-col, .st-section { min-width:0; }
.st-mobile .st-col { gap:16px; }
.st-mobile .st-section > .tc-cut-body { padding:14px 18px 20px 22px; }
.st-mobile .st-btn { width:100%; }
.st-desktop :is(.st-heading,.st-grid) { width:calc(1308 * var(--vs)); margin-left:auto; margin-right:auto; }
.st-desktop .st-scene { padding-top:calc(56 * var(--vs)); }
/* ID показываем целиком (переносом), чтобы игрок мог продиктовать его поддержке; на телефоне — подпись над значением. */
.st-account dt { flex:none; }
.st-id { flex:1; justify-content:flex-end; }
.st-id code { max-width:none; white-space:normal; word-break:break-all; text-align:right; }
.st-mobile .st-account > div:has(.st-id) { flex-direction:column; align-items:stretch; gap:8px; padding:10px 0; }
.st-mobile .st-id { justify-content:space-between; }
.st-mobile .st-id code { text-align:left; }

/* «Помощь и правила» (12.10.2026) — на материалах настроек. */
.st-desktop .sp-grid { grid-template-columns:calc(700 * var(--vs)) calc(580 * var(--vs)); }
.sp-text { color:#c3d6e2; font-size:calc(15 * var(--vs)); line-height:1.5; }
.sp-rules-list { margin:0; padding:0; list-style:none; counter-reset:sp; display:flex; flex-direction:column; gap:calc(14 * var(--vs)); }
.sp-rules-list li { position:relative; padding-left:calc(46 * var(--vs)); color:#d7e7f1; font-size:calc(16 * var(--vs)); line-height:1.5; counter-increment:sp; }
.sp-rules-list li::before { content:counter(sp); position:absolute; left:0; top:calc(1 * var(--vs)); display:grid; place-items:center; width:calc(30 * var(--vs)); height:calc(30 * var(--vs)); border:1px solid #1ea7ff; background:#0a2334; color:#7fe6ff; font-size:calc(14 * var(--vs)); font-weight:900; clip-path:polygon(calc(8 * var(--vs)) 0,100% 0,100% calc(100% - 8 * var(--vs)),calc(100% - 8 * var(--vs)) 100%,0 100%,0 calc(8 * var(--vs))); }
.sp-tutorial .sp-text { margin-bottom:calc(16 * var(--vs)) !important; }
.sp-tutorial .st-btn { width:calc(320 * var(--vs)); }
.sp-status { display:inline-block; margin-bottom:calc(10 * var(--vs)); padding:calc(4 * var(--vs)) calc(10 * var(--vs)); border:1px solid #f2b33d; color:#ffd27a; font-size:calc(12 * var(--vs)); font-weight:900; letter-spacing:.16em; }
.sp-id { display:flex; align-items:center; justify-content:space-between; gap:calc(12 * var(--vs)); margin-top:calc(14 * var(--vs)); padding-top:calc(12 * var(--vs)); border-top:1px solid #12384d; }
.sp-id code { min-width:0; color:#dff6ff; font-family:inherit; font-size:calc(15 * var(--vs)); word-break:break-all; }
.st-mobile .sp-tutorial .st-btn { width:100%; }
.st-mobile .sp-rules-list li { padding-left:40px; font-size:15px; }
.st-section-title, .st-btn { text-transform:uppercase; }
/* Высокие/узкие окна (ВК, Max, Telegram в оконном режиме): масштаб по ширине, прокрутка по вертикали — без мелкого текста и пустоты снизу. */
.st-desktop { container:stroot / size; }
@container stroot (aspect-ratio < 5/4) {
  .st-desktop .st-scene { --vs:calc(100cqw / 880); padding:calc(40 * var(--vs)) calc(50 * var(--vs)); }
  .st-desktop :is(.st-heading,.st-grid) { width:calc(720 * var(--vs)); }
  .st-desktop .st-grid, .st-desktop .sp-grid { grid-template-columns:calc(720 * var(--vs)); gap:calc(20 * var(--vs)); }
  .st-desktop .st-scene::before { background:linear-gradient(180deg,#02070d99,#02070d66 50%,#02070dcc); }
}