/* Ajustes (settings). Raíz: .screen.ui.s-settings. Spec 8.14: tres .pnl (Juego · Cuenta · Acerca de)
   con su título en .ty-h3 a 20 y filas de 44 separadas por un filo. El interruptor (.switch) está
   en base.css. */

.s-settings .settings-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px;
  width: 100%; max-width: 1180px; max-height: 480px; align-self: center; margin: auto 0; padding: 12px;
}
.s-settings .set-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 14px; }
.s-settings .set-t { flex: none; font-size: 20px; margin-bottom: 4px; }
.s-settings .set-rows { flex: none; display: flex; flex-direction: column; }
.s-settings .set-row { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: inset 0 -1px 0 var(--hair); }
.s-settings .set-l { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--f-ui); color: var(--tx-1); white-space: nowrap; }
.s-settings .set-v { font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-right: 2px; text-shadow: 0 2px 0 rgba(0,8,30,.55); }
.s-settings .set-sub { flex: none; margin: 12px 0 8px; }
/* Controles: pozo con cuatro líneas «clave · qué hace» */
.s-settings .set-ctl { flex: 1 1 auto; max-height: 190px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; padding: 9px 12px; }
.s-settings .set-ctl > div { display: flex; flex-direction: column; gap: 2px; }
.s-settings .set-ctl b { font: 800 9.5px/1 var(--f-ui); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-2); }
.s-settings .set-ctl .ty-small { color: var(--tx-2); font-weight: 600; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cuenta */
.s-settings .set-acc { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
/* con alto de sobra, los botones de la cuenta quedan en medio entre las filas y el borrado */
#stage[data-h="l"] .s-settings .set-acc, #stage[data-h="xl"] .s-settings .set-acc { margin: auto 0; }
.s-settings .set-acc p { margin: 0 0 2px; }
.s-settings .set-acc .btn { width: 100%; padding: 0 10px; }
.s-settings .set-danger { flex: none; margin-top: auto; padding-top: 12px; box-shadow: inset 0 1px 0 var(--hair); display: flex; }

/* Acerca de */
.s-settings .set-about p { margin: 0 0 8px; }
.s-settings .set-brand { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.s-settings .set-brand img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1.5px rgba(255,211,77,.7), 0 4px 8px rgba(0,0,0,.45); }
.s-settings .set-brand .ty-h2 { font-size: 24px; }
.s-settings .set-brand .ty-small { margin-top: 3px; }
.s-settings .set-about .botbadge { vertical-align: 1px; margin: 0 1px; }
.s-settings .set-link { flex: none; align-self: flex-start; font: 700 12px/1.4 var(--f-ui); color: var(--c-cyan); text-decoration: underline; text-underline-offset: 2px; }
.s-settings .set-cred { flex: none; margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 1px 0 var(--hair); }
.s-settings .set-cred .ty-over { margin-bottom: 2px; }
.s-settings .set-cred .ty-small { font-weight: 600; }
.s-settings .set-ver { flex: none; align-self: flex-start; margin-top: 10px; }

/* ---- Ventanas de la clave de cuenta ----------------------------------------------------------- */
.key-modal { width: 420px; max-width: 100%; }
.key-modal > .ty-body { margin: 0 0 10px; font-size: 12px; }
.key-modal > .ty-body b { color: #fff; font-weight: 800; }
.key-modal input.txt.key-txt { font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.key-modal .key-warn { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--c-red-hi); }
.key-modal .key-warn svg { flex: none; }
.key-modal .actions .btn svg { width: 14px; height: 14px; }