/* Settings modal (openSettingsModal in js/core/game.js). */
#settingsModal .ui-modal__content { overflow-x: hidden; }

.stg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3, 12px);
    min-width: 0;
}

.stg-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--sect-surface-2, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--sect-border, #333);
    border-radius: var(--r-md, 8px);
}
.stg-card--danger { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.05); }
.stg-card--danger .stg-card__title { color: var(--ui-red, #ff6b6b); }
.stg-card__title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ui-gold, #ffd700);
}
.stg-card__title--spaced { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.stg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; font-size: 0.92em; color: var(--sect-text, #ddd); cursor: pointer; }
.stg-row__label { min-width: 0; overflow-wrap: anywhere; }
.stg-row .sect-select { min-width: 0; max-width: 55%; }
.stg-hint { margin: -2px 0 2px; font-size: 0.78em; line-height: 1.4; color: var(--sect-text-dim, #9ca3af); }

.stg-zoom { display: inline-flex; align-items: center; gap: 4px; }
.stg-zoom__btn, .stg-zoom__reset {
    min-width: 32px; min-height: 32px; padding: 0 8px;
    font-family: inherit; font-size: 0.95em; font-weight: 700; cursor: pointer;
    color: var(--sect-text, #fff); background: var(--sect-surface-1, rgba(0, 0, 0, 0.35));
    border: 1px solid var(--sect-border-strong, #444); border-radius: var(--r-sm, 6px);
}
.stg-zoom__btn:hover:not(:disabled), .stg-zoom__reset:hover { border-color: var(--ui-teal, #4ecdc4); }
.stg-zoom__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stg-zoom__value { min-width: 48px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stg-zoom__reset { font-size: 0.8em; }

.stg-btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stg .sect-btn { min-width: 0; overflow-wrap: anywhere; justify-content: center; }

#settingsModal .stg .stg-btn--discord { color: #fff; background: #5865f2; border-color: #5865f2; }
#settingsModal .stg .stg-btn--discord:hover { background: #6b77f5; }
#settingsModal .stg .stg-btn--violet { color: #fff; background: #7c5cff; border-color: #7c5cff; }
#settingsModal .stg .stg-btn--violet:hover { background: #8d70ff; }
#settingsModal .stg .stg-btn--ok { color: #04201d; background: #2ecc71; border-color: #2ecc71; }
#settingsModal .stg .stg-btn--gold { color: #231a00; background: var(--ui-gold, #ffd700); border-color: var(--ui-gold, #ffd700); }
#settingsModal .stg .stg-btn--gold:hover { filter: brightness(1.08); }
#settingsModal .stg .stg-btn--warn { color: #231a00; background: #e67e22; border-color: #e67e22; }
#settingsModal .stg .stg-btn--warn:hover { filter: brightness(1.08); }

.stg-version { grid-column: 1 / -1; text-align: center; font-size: 0.8em; color: var(--sect-text-dim, #6b7280); }

@media (max-width: 560px) {
    .stg { grid-template-columns: minmax(0, 1fr); }
}

/* Language / Text dialog */
.stg--stack { grid-template-columns: minmax(0, 1fr); }
.stg-select-lg { flex: 1 1 200px; min-width: 0; max-width: 100%; padding: 8px 12px; font-size: 1em; font-weight: 700; }
.stg-textarea { width: 100%; min-height: 130px; resize: vertical; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }

/* Small settings dialogs (Eating, Log, Auto Refine) */
.stg-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stg-row__text .stg-hint { margin: 0; }
.stg-row--toggle { padding: 2px 0; }
.stg-slider { flex: 1 1 auto; min-width: 0; }
.stg-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.stg-chip { position: relative; cursor: pointer; }
.stg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.stg-chip span {
    display: inline-block; padding: 4px 10px; font-size: 0.8em; font-weight: 600;
    color: var(--sect-text-dim, #9ca3af); background: var(--sect-surface-1, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--sect-border, #333); border-radius: 999px;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.stg-chip:hover span { color: var(--sect-text, #fff); border-color: var(--ui-teal, #4ecdc4); }
.stg-chip input:checked + span { color: #04201d; background: var(--ui-teal, #4ecdc4); border-color: var(--ui-teal, #4ecdc4); }
.stg-chip input:focus-visible + span { outline: 2px solid var(--ui-gold, #ffd700); outline-offset: 2px; }
.stg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stg-card > .stg-select-lg { flex: 0 0 auto; width: 100%; }