/* ============================================================
   НАСТРОЙКИ — вторая половина бывшего профиля: только ручки.

   Почему отдельный экран. До 03.08.2026 всё это лежало на странице профиля,
   вперемешку с рейтингом и кошельком: одиннадцать блоков подряд, 3099px на
   телефоне 390×844, кнопка «Звук» на 2889-м пикселе — на четвёртом экране.
   Чтобы выключить звук, приходилось пролистать весь профиль вместе со стендом
   сцен компаньона.

   Устройство экрана: СПИСОК из шести разделов, в каждой строке — текущее
   значение («звук включён · уведомления выключены»). Что где стоит, видно не
   заходя внутрь, и первый экран влезает целиком.

   ОДНА разметка, два поведения:
   · телефон — тап по строке открывает подэкран, список уезжает (`#p-settings.sub`);
   · десктоп ≥1024 — подэкранов нет вовсе: список слева, раздел справа.

   Карточки, строки и кнопки здесь общие с профилем (`.pf-card`, `.pf-row`,
   `.pf-btn` из styles/profile.css): настройки — не другое приложение, и второй
   набор тех же классов разъехался бы с первым на первой же правке.
   ============================================================ */

/* ---- шапка со стрелкой «назад» ----
   Стрелка ведёт в профиль (а из подэкрана — обратно в список): настройки
   открываются ИЗ профиля, и уходить из них надо туда же, откуда пришли. */
.st-top{display:flex;align-items:center;gap:11px;margin:6px 16px 12px}
.st-back{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;color:var(--text);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--bord)}
.st-back:active{transform:scale(.94)}
.st-back:hover{background:rgba(255,255,255,.09)}
.st-ttl{flex:1;min-width:0}
.st-ttl b{display:block;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ttl small{display:block;color:var(--muted);font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- список разделов ---- */
.st-list{margin:0 16px 11px;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid var(--bord)}
.st-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;
  background:none;border:0;text-align:left;color:var(--text);cursor:pointer;font-family:inherit}
.st-item+.st-item{border-top:1px solid rgba(255,255,255,.05)}
.st-item:active{background:rgba(255,255,255,.06)}
.st-item:hover{background:rgba(255,255,255,.04)}
/* Подсветка текущего раздела нужна только там, где список и раздел видны
   одновременно, — на десктопе. На телефоне список в этот момент уже уехал. */
.st-item.on{background:rgba(124,92,255,.14)}
.st-item .ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:18px;color:var(--p1);background:rgba(124,92,255,.14)}
.st-item .tx{flex:1;min-width:0}
.st-item .tx b{display:block;font-size:14px;font-weight:700;line-height:1.25}
/* Текущее значение прямо в строке — ради него список и заведён: иначе это
   оглавление, по которому всё равно приходится ходить, чтобы узнать, что где. */
.st-item .tx small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-item .ar{flex:none;font-size:18px;color:var(--dim)}
.st-item:hover .ar{color:var(--p1)}

/* Телефон: открыт подраздел — список уезжает целиком. Оба на одном экране не
   помещаются, а «список сверху, раздел под ним» превращает настройки обратно в
   ту самую простыню, от которой уходили. */
#p-settings.sub .st-list{display:none}

/* ---- образец колоды ----
   Четыре настоящих карты сукна (`.pc`, размеры из tokens.css) — своей геометрии
   у образца нет, иначе он показывал бы карту не того размера, что за столом. */
.pf-deck{display:flex;gap:7px;justify-content:center;padding:4px 0 8px}
/* Образец ставки: три суммы в ряд. Узлы `.chz` спозиционированы абсолютно (они
   живут у плашки имени за столом), поэтому здесь каждому нужна своя коробка —
   иначе все три легли бы друг на друга в углу карточки. */
.pf-chips{display:flex;gap:26px;justify-content:center;align-items:flex-end;padding:10px 0 12px}
.pf-chips>.chz{position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:0;transform:none}

/* Настройки — ДОЧЕРНИЙ экран профиля, и подсветка в навигации это повторяет: на
   телефоне горит «Профиль» (другого входа в настройки там нет), на десктопе
   гаснет — там у настроек собственный пункт сайдбара. Без этого правила на
   телефоне не подсвечено ничего, и панель читается как сломанная. */
body[data-screen="settings"] #navProfile{color:var(--p1)}
body[data-screen="settings"] #navProfile i{filter:drop-shadow(0 0 8px rgba(139,123,255,.8))}

/* ---- десктоп: список слева, раздел справа ---- */
@media (min-width:1024px){
  #p-settings{left:0;right:0;width:auto}
  .st-wrap{max-width:1080px;margin:0 auto;padding:22px 26px 0}
  .st-top{margin:0 0 16px}
  .st-ttl b{font-size:26px}
  .st-split{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:start}
  .st-split .st-list{margin:0}
  #p-settings.sub .st-list{display:block}
  .st-pane>.pf-card{margin:0 0 12px}

  body[data-screen="settings"] #navProfile{color:var(--dim)}
  body[data-screen="settings"] #navProfile i{filter:none}
}