/* Game settings → Setup & SDK: the guided one-click install (assets/js/pages/settings.js → setup). */
.su-strategy { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.su-strategy .label { color: var(--text-2); font-size: var(--fs-2); font-weight: 600; }
.su-strategy + div .note { display: flex; gap: var(--sp-2); align-items: flex-start; }
.su-strategy + div .note .icon { flex: none; margin-top: 2px; }

/* steps: a numbered rail; the current step is accented, finished ones show a check */
.su-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.su-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4); position: relative; }
.su-step + .su-step { border-top: 1px solid var(--border); }
.su-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--muted); font-size: var(--fs-2); font-weight: 600;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.su-num .icon { display: none; width: 14px; height: 14px; }
.su-step.current .su-num { background: var(--accent); color: var(--on-primary); box-shadow: 0 0 0 3px var(--accent-ring); }
.su-step.done .su-num { background: var(--ok-bg); color: var(--ok); }
.su-step.done .su-num span { display: none; }
.su-step.done .su-num .icon { display: block; }
.su-step-b { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.su-step-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 26px; }
.su-step-h h3 { font-size: var(--fs-3); font-weight: 600; color: var(--text-strong); margin: 0; }
.su-step:not(.current):not(.done) .su-step-h h3 { color: var(--text-2); }

/* step 1: installer / model side by side */
.su-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.su-option { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg-2); }
.su-option p { margin: 0; line-height: 1.5; flex: 1; }
.su-option-h { display: flex; align-items: center; gap: var(--sp-2); }

/* step 2: name / secret / domain rows */
.su-kvs { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg-2); }
.su-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 2px 4px 2px var(--sp-3); font-size: var(--fs-2); }
.su-kv + .su-kv { border-top: 1px solid var(--border); }
.su-kv code { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-kv code.masked { color: var(--muted); letter-spacing: .12em; }

/* step 3: live detection */
.su-live { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.su-live .grow { flex: 1; min-width: 0; }

.su-update { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.su-update .muted { flex: 1; min-width: 220px; line-height: 1.5; }

/* advanced: the manual snippets */
.su-advanced { border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel); }
.su-advanced summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; border-radius: var(--radius-s); color: var(--text-2);
  transition: background-color var(--dur-1) var(--ease); }
.su-advanced summary::-webkit-details-marker { display: none; }
.su-advanced summary:hover { background: var(--hover); }
.su-advanced summary .icon { transform: rotate(-90deg); transition: transform var(--dur-2) var(--ease); }
.su-advanced[open] summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.su-advanced[open] summary .icon { transform: none; }
.su-advanced > .stack { padding: var(--sp-4); }

@container (max-width: 860px) {
  .su-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .su-options { grid-template-columns: minmax(0, 1fr); }
  .su-step { padding: var(--sp-3); gap: var(--sp-2); }
  .su-kv { grid-template-columns: 52px minmax(0, 1fr) auto; }
}