/* ============================================================
   СПРАВКА ПО КЛАССАМ
   ============================================================ */

/* ---------- справка по классам ---------- */
.help-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.help-menu { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 10px; }
.help-menu-item {
    text-align: left; padding: 8px 12px; font-size: .85rem;
    background: var(--surface); border: 1px solid var(--border-dim);
    border-radius: 8px; color: var(--text); cursor: pointer;
}
.help-menu-item:hover { border-color: #b7ff2c; }
.help-menu-item.cur { background: rgba(183, 255, 44, .16); border-color: #b7ff2c; font-weight: 700; }
.help-body {
    border: 1px solid var(--border-dim); border-radius: var(--radius);
    background: var(--surface); padding: 18px; font-size: .88rem; line-height: 1.55;
}
.help-body h3 { margin: 0 0 8px; color: #e4ffa1; }
.help-body h4 { margin: 18px 0 8px; color: #e4ffa1; font-size: .9rem; }
.help-intro { color: var(--text); margin: 0 0 12px; }
.help-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.help-imgs img {
    max-width: calc(50% - 5px); min-width: 220px; flex: 1;
    border: 1px solid var(--border-dim); border-radius: 8px;
}
.help-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 12px 0; }
.help-facts > div {
    display: flex; flex-direction: column; gap: 3px; padding: 8px 10px;
    border: 1px solid var(--border-dim); border-radius: 8px; background: rgba(183, 255, 44, .06);
}
.help-fact-k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.help-fact-v { font-size: .86rem; }
.help-look { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); }
.help-look b { color: var(--text); }
.help-chip {
    display: inline-block; padding: 2px 9px; margin: 2px 3px 2px 0;
    border: 1px solid var(--border-dim); border-radius: 20px; font-size: .76rem;
}
.help-talents { display: flex; flex-direction: column; gap: 10px; }
.help-talent { border-left: 3px solid #b7ff2c; padding: 6px 12px; background: rgba(183, 255, 44, .07); border-radius: 0 8px 8px 0; }
.help-talent-name { font-weight: 700; color: #e4ffa1; cursor: help; }
.help-talent-text { font-size: .84rem; color: var(--text-dim); margin-top: 3px; white-space: pre-wrap; }