/* ════════════════════════════════════════════════════════════
   Speech Combat — пользовательские настройки (как в Telegram-боте):
   способ ответа, голос, имя, пол, уровень сложности + фото пользователя.
   //
   Speech Combat — user settings (as in the Telegram bot):
   response method, voice, name, gender, difficulty level + the user's photo.
   ════════════════════════════════════════════════════════════ */

.set-wrap { max-width: 640px; margin: 0 auto; padding: 24px 0 48px; }

.set-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft, var(--shadow));
  padding: 20px 22px;
  margin-bottom: 16px;
}
.set-card-title { font-size:16px; font-weight:650; letter-spacing:0; color:var(--text); margin-bottom:12px; }

/* ───── Профиль: фото + имя ───── */
.set-profile { display: flex; align-items: center; gap: 18px; }

.set-photo {
  position: relative; flex-shrink: 0; cursor: pointer;
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--red); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, var(--surface));
}
.set-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text3); }
.set-photo-empty .material-symbols-rounded { font-size: 42px; }
.set-photo-edit {
  position: absolute; right: 0; bottom: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}
.set-photo-edit .material-symbols-rounded { font-size: 15px; }

.set-profile-info { flex: 1; min-width: 0; }
.set-label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.set-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; font-size: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none;
}
.set-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow, rgba(255,23,68,0.15)); }
.set-input::placeholder { color: var(--text3); }

.set-remove-photo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 12px; color: var(--text3); cursor: pointer;
}

/* ───── Варианты (радио-кнопки в виде плиток) ─────
   Options (radio buttons rendered as tiles). */
.set-options { display: flex; flex-wrap: wrap; gap: 10px; }
.set-options-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.set-options-voices .set-option { min-width:0; }

.set-option { cursor: pointer; }
.set-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.set-option-box {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; min-height: 44px;
  font-size: 14px; font-weight: 600; text-align: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s, background .15s, color .15s;
}
.set-option:hover .set-option-box { border-color: var(--border-strong); background: var(--surface-hover, var(--surface)); }

/* Выбранный вариант — красная рамка (как выделенный оппонент на скриншоте).
   The selected option — a red border (like the highlighted opponent in the screenshot). */
.set-option input:checked + .set-option-box {
  border-color: var(--red); color: var(--red);
  box-shadow: none;
}
.set-option input:focus-visible + .set-option-box { outline:2px solid var(--blue); outline-offset:3px; }
.set-card { box-shadow:none; border-radius:16px; background:var(--surface); }
.set-btn:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

.set-option-sub { font-size: 11px; font-weight: 500; color: var(--text3); }

/* Independent text rows: labels never share a flex line with the voice name. */
.set-option-box.set-voice-box { box-sizing:border-box; height:100%; display:grid; grid-template-columns:24px minmax(0,1fr) 18px; align-items:start; gap:10px; padding:16px 14px; text-align:left; min-width:0; }
.set-voice-icon { width:24px; height:24px; color:var(--text2); margin-top:2px; }
.set-voice-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.set-voice-name { font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.set-voice-description { font-size:13px; line-height:1.5; font-weight:400; color:var(--text2); overflow-wrap:anywhere; }
.set-voice-copy .set-option-sub { display:block; font-size:11px; line-height:1.5; margin-top:3px; }
.set-voice-check { width:18px; height:18px; visibility:hidden; margin-top:2px; }
.set-option input:checked + .set-voice-box .set-voice-check { visibility:visible; }
.set-option input:checked + .set-voice-box .set-voice-icon { color:var(--red); }
@media (prefers-reduced-motion:reduce) { .set-option-box { transition:none; } }

/* Недоступный голос — с замком, выбрать нельзя (как в боте).
   An unavailable voice — with a lock, cannot be chosen (as in the bot). */
.set-option.locked { cursor: not-allowed; }
.set-option.locked .set-option-box { opacity: .55; }
.set-option.locked:hover .set-option-box { border-color: var(--border); }
.set-option.locked .material-symbols-rounded { font-size: 16px; }

.set-empty { font-size: 13px; color: var(--text3); }

/* ───── Кнопка сохранения ───── */
.set-btn {
  width: 100%; padding: 14px; margin-top: 4px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  border: none; border-radius: var(--radius); cursor: pointer;
}
.set-btn-primary {
  background: linear-gradient(135deg, var(--red) 0%, #c4102f 100%);
  color: #fff;
}
.set-btn-primary:hover { filter: brightness(1.08); }
.set-btn-primary:active { transform: translateY(1px); }

/* ───── Сообщения ───── */
.set-msg {
  padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
}
.set-msg-success { background: rgba(46,160,67,0.15); color: #2ea043; border: 1px solid rgba(46,160,67,0.35); }
.set-msg-error   { background: rgba(255,23,68,0.12); color: var(--red); border: 1px solid rgba(255,23,68,0.35); }

@media (max-width: 600px) {
  .set-wrap { padding: 16px 0 32px; }
  .set-card { padding: 16px; }
  .set-profile { gap: 14px; }
  .set-photo { width: 68px; height: 68px; }
  .set-options-voices { grid-template-columns: minmax(0, 1fr); }
}
.set-photo-img[hidden] { display: none; }
.set-difficulty-options { display:grid; grid-template-columns:minmax(0,1fr); }
.set-difficulty-options .set-option-box { display:flex; align-items:flex-start; flex-direction:column; text-align:left; gap:8px; width:100%; box-sizing:border-box; }
.set-difficulty-description { font-size:13px; font-weight:400; line-height:1.5; color:var(--text2); }
.avatar-picker { border:1px solid var(--border); border-radius:12px; padding:12px; margin:12px 0; }
.avatar-picker summary { cursor:pointer; display:flex; align-items:center; gap:12px; min-height:48px; font-weight:600; }
.avatar-picker summary img { border-radius:12px; background:var(--surface-hover); }
.avatar-picker summary small { display:block; color:var(--text2); font-size:12px; font-weight:400; margin-top:4px; }
.avatar-picker fieldset { border:0; padding:0; min-width:0; margin:18px 0 0; }
.avatar-picker legend { color:var(--text2); font-size:12px; margin-bottom:8px; }
.avatar-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.avatar-choice { cursor:pointer; position:relative; min-width:0; }
.avatar-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.avatar-choice span { display:flex; justify-content:center; border:2px solid transparent; border-radius:12px; padding:4px; background:var(--surface-hover); }
.avatar-choice img { width:100%; height:auto; aspect-ratio:1; max-width:64px; }
.avatar-choice input:checked + span { border-color:var(--red); }
.avatar-choice input:focus-visible + span { outline:2px solid var(--blue); outline-offset:2px; }
.avatar-choice input:disabled + span { opacity:.35; cursor:not-allowed; filter:grayscale(1); }
.avatar-default { display:flex; gap:8px; align-items:center; font-size:13px; line-height:1.5; min-height:44px; margin:12px 0; }
.avatar-random { background:var(--surface-hover); border:1px solid var(--border); border-radius:8px; color:var(--text); min-height:44px; padding:8px 14px; font:inherit; font-size:13px; cursor:pointer; }
@media(max-width:600px) { .avatar-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.set-photo-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.set-photo:focus-within { outline:2px solid var(--blue); outline-offset:4px; }
.set-photo-edit svg { width:16px; height:16px; }
.set-save-bar { position:sticky; bottom:0; z-index:4; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 -4px 18px rgba(0,0,0,.06); }
.set-save-bar p { flex:1 1 170px; margin:0; color:var(--text2); font-size:12px; line-height:1.5; }
.set-save-bar .set-btn { width:auto; flex:1 1 190px; margin:0; }
.set-save-bar .set-btn:disabled { opacity:.65; cursor:wait; }