/* BRASLOL 2 - modal de configuracoes.
   Mesma linguagem dos paineis do dashboard (career.css), do elenco (roster.css) e do draft (draft.css): vidro azulado, titulo em caixa alta com espacamento largo,
   linhas finas brancas, botoes retos e seletores iguais aos das lanes do draft.
   Todas as classes comecam com s- . Sem style="" no HTML (CSP): so classes aqui. O JS so troca o atributo hidden e as classes .on. */

#smodal{--d:"Bahnschrift","DIN Alternate","DIN 1451 Std","Barlow Semi Condensed","Roboto Condensed","Segoe UI",system-ui,-apple-system,sans-serif;
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(8,10,28,.62);
  font-family:var(--d);color:#fff;user-select:none;-webkit-user-select:none;animation:scrin .2s ease both}
#smodal[hidden]{display:none}
#smodal :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- painel (vidro) ---- */
.s-p{position:relative;width:min(560px,100%);max-height:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;outline:0;
  background:linear-gradient(135deg,rgba(46,54,78,.34),rgba(28,34,56,.40));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:5px;box-shadow:none;animation:hin .25s ease both}
.s-p:focus-visible{outline:0}
.s-p::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../assets/img/backgrounds/config.jpg) center/cover no-repeat;opacity:.10}   /* fundo do painel: imagem bem transparente por tras do vidro. Mude o opacity (0 a 1) para mais ou menos visivel */

/* ---- cabecalho: icone + titulo + fechar ---- */
.s-ph{display:flex;align-items:center;gap:14px;height:58px;flex:none;margin:0 20px;border-bottom:1px solid rgba(255,255,255,.5)}
.s-ph h2{margin:0 auto 0 0;font-size:15px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.s-ic{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:rgba(255,255,255,.92)}
.s-logo{display:block;flex:none;width:22px;height:24px;object-fit:contain;pointer-events:none;user-select:none}   /* logo do site (assets/img/logo.png, branca com transparencia, proporcao 557x593) no cabecalho */
.s-x{margin:0 -6px 0 0}   /* so a posicao: o visual e o .x-btn (css/style.css) */

/* ---- corpo: grupos e linhas ---- */
.s-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:4px 20px 8px}
.s-sec{padding-top:16px}
.s-sh{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.s-gn{margin:0 0 4px;font-size:11.5px;line-height:1.35;letter-spacing:.02em;color:rgba(255,255,255,.7)}   /* aviso do grupo (embaixo do titulo), mesma cor/tamanho do texto pequeno das linhas */
.s-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.s-row:last-child{border-bottom:0}
.s-row.s-nd{min-height:0;padding:9px 0}   /* linha sem descricao (so o titulo): sem a altura minima de 64px, que e dimensionada para titulo + descricao */
.s-lb{display:flex;flex-direction:column;gap:4px;min-width:0}
.s-lb b{font-size:13px;font-weight:700;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}
.s-lb small{font-size:11.5px;line-height:1.35;letter-spacing:.02em;color:rgba(255,255,255,.7)}
.s-hint{margin:14px 0 4px;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.55)}

/* ---- seletor Ligado / Desligado (mesmo visual das lanes do draft) ---- */
.s-seg{display:flex;flex:none;gap:6px}
.s-opt{height:30px;margin:0;padding:0 12px;border:0;border-radius:2px;background:rgba(255,255,255,.05);font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.75);cursor:pointer;transition:background .15s,color .15s}
.s-opt:hover{background:rgba(255,255,255,.16);color:#fff}
.s-opt.on{background:rgba(255,255,255,.3);color:#fff;pointer-events:none}

/* ---- volume: icone (silencia direto) + barra + porcentagem (js/game/settings.js -> sVolCtl) ---- */
.s-vol{display:flex;flex:none;align-items:center;gap:10px}
.s-vb{display:flex;align-items:center;justify-content:center;width:34px;height:30px;margin:0;padding:0;border:0;border-radius:0;background:rgba(255,255,255,.05);cursor:pointer;transition:background .15s}
.s-vb:hover{background:rgba(255,255,255,.16)}
.s-vb:not(.mute) .s-mt,.s-vb.mute .s-wv{display:none}   /* ligado = ondas; mudo = X */
.s-rng{-webkit-appearance:none;appearance:none;width:130px;height:18px;margin:0;background:none;cursor:pointer;--p:100%}
.s-rng::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,rgba(255,255,255,.9) var(--p),rgba(255,255,255,.25) var(--p))}
.s-rng::-moz-range-track{height:4px;background:rgba(255,255,255,.25)}
.s-rng::-moz-range-progress{height:4px;background:rgba(255,255,255,.9)}
.s-rng::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:0;background:#fff}
.s-rng::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:0;background:#fff}
.s-rng:focus-visible{outline:2px solid #fff;outline-offset:3px}
.s-vv{min-width:38px;text-align:right;font-size:11px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
@media (max-width:520px){.s-rng{width:96px}}

/* ---- mensagem + rodape ---- */
.s-msg{min-height:16px;margin:0 20px;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
.s-pf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin:6px 20px 0;padding:14px 0 16px;border-top:1px solid rgba(255,255,255,.35)}
.s-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;margin:0;padding:0 18px;border:0;border-radius:0;background:rgba(255,255,255,.14);
  color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .15s,transform .12s}
.s-btn:hover{background:rgba(255,255,255,.28)}.s-btn:active{transform:scale(.96)}
.s-btn.pri{background:#e6eaff;color:#141a2e}
.s-btn.pri:hover{background:#fff}
#smodal .s-btn:focus-visible{outline:0;background:rgba(255,255,255,.3)}
#smodal .s-btn.pri:focus-visible{background:#dfe5ff}

@media (max-width:520px){
  .s-ph,.s-pf,.s-msg{margin-left:16px;margin-right:16px}
  .s-body{padding:4px 16px 8px}
  .s-row{gap:12px}
  .s-lb b{font-size:12px}
  .s-opt{padding:0 9px;letter-spacing:.08em}
  .s-btn{padding:0 12px;font-size:11px;letter-spacing:.08em}}
@media (max-width:380px){.s-row{flex-wrap:wrap}}