/* Mythrael /server — панель рейтов+машина · 36 классов · PvP-матрица 36×36 (2026-06-17) */

/* ── общая секция ── */
.srv-sec{padding:clamp(26px,3.6vw,52px) 0}
.srv-sec .container{display:block}
.srv-blk-head{display:flex;flex-direction:column;gap:4px;margin-bottom:clamp(14px,1.6vw,22px)}
.srv-blk-kicker{font-family:var(--ff-h);font-weight:var(--fw-sb);font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);opacity:.85}
.srv-blk-title{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-2xl);letter-spacing:.03em;color:var(--t1);margin:0;text-transform:uppercase}
.srv-blk-desc{font-size:var(--fs-sm);color:var(--t2);line-height:1.6;margin:8px 0 0;max-width:70ch}

/* ════ Панель рейтов + машина ════ */
.srv-panel{padding:clamp(28px,4vw,56px) 0 clamp(18px,2.6vw,36px)}
.srv-panel .container{display:block}
.srv-panel-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,28px);align-items:start}

.srv-rate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:clamp(10px,1.2vw,16px)}
.srv-rate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:clamp(16px,1.8vw,26px) clamp(8px,1vw,14px);background:linear-gradient(160deg,var(--surf-2) 0%,rgba(10,9,26,.55) 100%);border:1px solid var(--brd);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--tr),transform var(--tr)}
.srv-rate::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grd);opacity:.45;transition:opacity var(--tr)}
.srv-rate:hover{border-color:var(--brd-3);transform:translateY(-2px)}
.srv-rate:hover::before{opacity:1}
.srv-rate-val{font-family:var(--ff-h);font-weight:var(--fw-bk);font-size:var(--fs-2xl);line-height:1;background:var(--gold-grd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(240,184,64,.3))}
.srv-rate-lbl{font-family:var(--ff-h);font-weight:var(--fw-sb);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--t2);text-align:center}
.srv-rate-note{font-size:9px;line-height:1.3;color:var(--t3);letter-spacing:.04em;text-align:center}
@keyframes srvPulse{0%{box-shadow:0 0 0 0 rgba(0,232,122,.6)}70%{box-shadow:0 0 0 7px rgba(0,232,122,0)}100%{box-shadow:0 0 0 0 rgba(0,232,122,0)}}

/* ════ Chip-фильтры ════ */
.srv-filter{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);margin-bottom:clamp(16px,2vw,26px)}
.srv-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.srv-chips-lbl{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-right:4px}
.srv-chip{font-family:var(--ff-h);font-weight:var(--fw-sb);font-size:var(--fs-xs);letter-spacing:.04em;padding:6px 13px;color:var(--t2);background:var(--surf);border:1px solid var(--brd);border-radius:var(--r-pill);cursor:pointer;transition:all var(--tr);white-space:nowrap}
.srv-chip:hover{border-color:var(--brd-3);color:var(--t1)}
.srv-chip.active{color:#0a0800;background:var(--gold-grd);border-color:var(--gold-l);font-weight:var(--fw-b)}

/* ════ Карточки классов ════ */
.srv-cls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(10px,1.3vw,16px)}
.srv-cls{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(13px,1.4vw,18px);background:linear-gradient(165deg,var(--surf-2) 0%,rgba(8,7,18,.6) 100%);border:1px solid var(--brd);border-left:3px solid var(--rc,var(--gold));border-radius:var(--r-lg);transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)}
.srv-cls:hover{transform:translateY(-3px);border-color:var(--brd-3);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.srv-cls.hidden{display:none}
.srv-cls-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.srv-cls-role{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--rc,var(--gold-l))}
.srv-cls-role::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rc,var(--gold));box-shadow:0 0 8px var(--rc,var(--gold))}
.srv-cls-race{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.srv-cls-name{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-lg);line-height:1.15;color:var(--t1);margin:0}
.srv-cls-idx{display:flex;flex-direction:column;gap:5px}
.srv-cls-idx-row{display:flex;align-items:baseline;justify-content:space-between}
.srv-cls-idx-lbl{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.srv-cls-idx-val{font-family:var(--ff-h);font-weight:var(--fw-bk);font-size:var(--fs-lg);color:var(--gold-l)}
.srv-cls-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.srv-cls-bar i{display:block;height:100%;border-radius:3px;background:var(--gold-grd);box-shadow:0 0 8px rgba(240,184,64,.45)}
.srv-cls-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.srv-stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;background:rgba(255,255,255,.025);border-radius:var(--r-sm)}
.srv-stat b{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-sm);color:var(--t1)}
.srv-stat span{font-size:9px;letter-spacing:.06em;color:var(--t3)}
.srv-cls-combat{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px solid var(--brd)}
.srv-cls-combat span{font-size:var(--fs-xs);color:var(--t2)}
.srv-cls-combat b{color:var(--gold-l);font-weight:var(--fw-sb)}
.srv-cls-vit{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding-top:8px;border-top:1px solid var(--brd)}
.srv-cls-vit-lbl{grid-column:1/-1;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:1px}
.srv-vit{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:var(--r-sm);font-size:9px;letter-spacing:.05em;color:var(--t3)}
.srv-vit b{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-sm);line-height:1}
.srv-vit.hp{background:rgba(80,180,90,.10)}.srv-vit.hp b{color:#9fe0a8}
.srv-vit.mp{background:rgba(90,140,220,.10)}.srv-vit.mp b{color:#9fb8e8}
.srv-vit.cp{background:rgba(200,160,60,.10)}.srv-vit.cp b{color:var(--gold-l)}
.srv-cls-empty{padding:24px;text-align:center;color:var(--t3);font-size:var(--fs-sm)}

/* ════ Баланс-блок ════ */
.srv-balance{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(18px,2vw,28px)}
@media(min-width:760px){.srv-balance{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.srv-balance{grid-template-columns:repeat(4,1fr)}.srv-balance.srv-bal-3{grid-template-columns:repeat(3,1fr)}}
.srv-bal{padding:clamp(13px,1.4vw,18px);background:linear-gradient(160deg,rgba(200,146,42,.05),rgba(10,9,26,.5));border:1px solid var(--brd);border-radius:var(--r-lg)}
.srv-bal-h{display:block;font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-md);color:var(--gold-l);margin-bottom:6px}
.srv-bal-t{font-size:var(--fs-sm);line-height:1.55;color:var(--t2)}
.srv-bal-sub{display:block;font-size:var(--fs-sm);line-height:1.5;color:var(--t3);margin-bottom:10px}
.srv-inst-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.srv-inst-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.05)}
.srv-inst-list li:last-child{border-bottom:0;padding-bottom:0}
.srv-inst-list .ii-n{font-size:var(--fs-sm);line-height:1.35;color:var(--t1);font-weight:var(--fw-m)}
.srv-inst-list .ii-b{flex:0 0 auto;font-size:11px;line-height:1.3;color:var(--gold-l);font-weight:var(--fw-sb);white-space:nowrap;padding:2px 8px;border:1px solid color-mix(in srgb,var(--gold-l) 26%,transparent);border-radius:20px;background:color-mix(in srgb,var(--gold-l) 8%,transparent)}

/* ── Схема противостояния 6 стихий ── */
.srv-elements{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(18px,2vw,26px)}
@media(max-width:760px){.srv-elements{grid-template-columns:1fr}}
.el-pair{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1vw,14px);padding:clamp(14px,1.6vw,20px) 12px;border:1px solid var(--brd);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(255,255,255,.02),rgba(10,9,26,.4))}
.el-tok{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;min-width:0}
.el-dot{width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 4px 16px -4px var(--el);background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--el) 92%,#fff 22%),var(--el) 58%,color-mix(in srgb,var(--el) 55%,#000) 100%)}
.el-nm{font-size:var(--fs-sm);font-weight:var(--fw-sb);color:#ece3d2;text-align:center;line-height:1.2}
.el-vs{flex:0 0 auto;font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:var(--fw-b);color:var(--t3);text-align:center;line-height:1.15}
.el-fire{--el:#e0563a}.el-water{--el:#3a9be0}.el-wind{--el:#4fc9a0}.el-earth{--el:#c39a3a}.el-holy{--el:#f0dca0}.el-dark{--el:#8a5cff}

/* ════ PvP-матрица 36×36 ════ */
.srv-mx-scroll{overflow:auto;max-height:min(78vh,760px);border:1px solid var(--brd-2);border-radius:var(--r-lg);background:var(--bg-2);-webkit-overflow-scrolling:touch}
.srv-mx{border-collapse:separate;border-spacing:0;font-family:var(--ff-h);width:max-content;min-width:100%}
.srv-mx th,.srv-mx td{border-right:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);text-align:center}
.srv-mx thead th{position:sticky;top:0;z-index:2;background:#0c0b18;color:var(--t2);font-weight:var(--fw-b);font-size:11px;width:clamp(30px,3.2vw,40px);min-width:30px;height:34px;padding:0}
.srv-mx-corner{position:sticky!important;left:0;top:0;z-index:4!important;background:#11101f!important;color:var(--gold-l)!important;font-size:10px;letter-spacing:.04em;min-width:clamp(120px,18vw,190px);text-align:left;padding:0 10px}
.srv-mx-cnum{cursor:default}
.srv-mx tbody th.srv-mx-rname{position:sticky;left:0;z-index:1;background:#0c0b18;color:var(--t1);font-weight:var(--fw-sb);font-size:11px;text-align:left;white-space:nowrap;padding:0 10px;min-width:clamp(120px,18vw,190px);border-left:3px solid var(--rc,var(--gold))}
.srv-mx td{font-size:10px;color:var(--t2);width:clamp(30px,3.2vw,40px);min-width:30px;height:30px;padding:0;font-weight:var(--fw-m)}
.pvp-cell-self{background:rgba(200,146,42,.22);color:var(--gold-l)}
.pvp-cell-eq{background:rgba(196,162,107,.16)}
.pvp-cell-eq-strong{background:rgba(196,162,107,.10)}
.pvp-cell-adv1{background:rgba(80,180,80,.14);color:#a6e6a6}
.pvp-cell-adv2{background:rgba(70,190,70,.28);color:#c8f0c8}
.pvp-cell-adv3{background:rgba(60,200,60,.46);color:#e6ffe6}
.pvp-cell-dis1{background:rgba(200,80,80,.14);color:#e8b0b0}
.pvp-cell-dis2{background:rgba(210,70,70,.28);color:#f0c8c8}
.pvp-cell-dis3{background:rgba(220,60,60,.46);color:#ffe6e6}
.srv-mx-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:14px;font-size:var(--fs-xs);color:var(--t3)}
.srv-mx-legend span{display:inline-flex;align-items:center;gap:6px}
.srv-mx-legend i{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.srv-mx-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--brd)}
.srv-mx-key span{font-size:var(--fs-xs);color:var(--t2)}
.srv-mx-key b{color:var(--gold-l);font-weight:var(--fw-b)}
.pvp-loading{padding:30px;text-align:center;color:var(--t3);font-size:var(--fs-sm)}

/* ════ Сравнение 1×1 (компаратор) ════ */
.srv-cmp{margin-bottom:clamp(18px,2vw,28px)}
.srv-cmp-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(8px,1.6vw,18px);align-items:end;margin-bottom:clamp(14px,1.6vw,20px)}
.srv-cmp-side{display:flex;flex-direction:column;gap:5px;min-width:0}
.srv-cmp-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.srv-cmp-sel{width:100%;max-width:100%;padding:10px 12px;background:var(--bg-2);border:1px solid var(--brd-2);border-radius:var(--r-md);color:var(--t1);font-family:var(--ff-h);font-size:var(--fs-sm);cursor:pointer}
.srv-cmp-sel:focus{outline:none;border-color:var(--gold)}
.srv-cmp-vs{align-self:center;font-family:var(--ff-h);font-weight:var(--fw-b);color:var(--gold-l);font-size:var(--fs-md);padding-bottom:10px}
.srv-cmp-out{border:1px solid var(--brd-2);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(200,146,42,.04),rgba(10,9,26,.45));padding:clamp(14px,1.8vw,22px)}
.srv-cmp-heads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.srv-cmp-hd{padding:10px 12px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--brd);text-align:center;transition:border-color .3s,opacity .3s}
.srv-cmp-hd h4{margin:0 0 6px;font-family:var(--ff-h);font-size:var(--fs-md);color:var(--t1)}
.srv-cmp-hd.win{border-color:rgba(70,196,106,.55);box-shadow:0 0 0 1px rgba(70,196,106,.22) inset}
.srv-cmp-hd.lose{opacity:.66}
.srv-cmp-rt{display:inline-block;font-size:10px;padding:2px 9px;border-radius:20px;color:var(--rc,var(--gold));border:1px solid var(--rc,var(--gold))}
.srv-cmp-verdict{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:11px 14px;border-radius:var(--r-md);margin-bottom:14px;background:rgba(10,9,26,.5);border:1px solid var(--fc,rgba(196,162,107,.3))}
.srv-cmp-vmark{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-md);color:var(--fc,var(--gold-l))}
.srv-cmp-vadv{font-size:var(--fs-sm);color:var(--t2);font-variant-numeric:tabular-nums}
.srv-cmp-vtxt{font-size:var(--fs-sm);color:var(--t2);text-align:center}
.srv-cmp-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.srv-cmp-stat{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding-bottom:9px}
.srv-cmp-sv{font-family:var(--ff-h);font-size:var(--fs-sm);color:var(--t2);font-variant-numeric:tabular-nums}
.srv-cmp-sv.a{text-align:right}
.srv-cmp-sv.b{text-align:left}
.srv-cmp-sv.lead{color:var(--gold-l);font-weight:var(--fw-b)}
.srv-cmp-slabel{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);white-space:nowrap;text-align:center}
.srv-cmp-ba,.srv-cmp-bb{position:absolute;bottom:0;height:3px;border-radius:2px;background:var(--brd-2);transition:width .4s ease}
.srv-cmp-ba{right:calc(50% + 4px)}
.srv-cmp-bb{left:calc(50% + 4px)}
.srv-cmp-ba.lead,.srv-cmp-bb.lead{background:var(--gold)}
.srv-cmp-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.srv-cmp-why li{padding:8px 12px;border-radius:var(--r-md);background:rgba(10,9,26,.4);border:1px solid var(--brd);border-left:3px solid var(--wc,var(--brd-2));font-size:var(--fs-sm);line-height:1.5;color:var(--t2)}
.srv-cmp-why li.role{border-left-color:var(--wc,var(--gold))}
.srv-cmp-why li.mirror{border-left-color:var(--gold-dim,#7a6020)}
.srv-cmp-why li b{color:var(--t1)}
@media(max-width:560px){.srv-cmp-sel{font-size:12px;padding:9px 10px}.srv-cmp-vs{font-size:var(--fs-sm)}}

/* матрица: подсветка строки/столбца + клик */
.srv-mx td{cursor:pointer}
.srv-mx-cnum,.srv-mx-corner,.srv-mx-rname{cursor:default}
.srv-mx td.hl-r,.srv-mx td.hl-c{box-shadow:inset 0 0 0 9999px rgba(200,146,42,.12)}
.srv-mx th.hl-r,.srv-mx th.hl-c{color:var(--gold-l)!important;background:#15131f!important}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}

/* --- ступени профессий (табы) 2026-06-17 --- */
.srv-stage-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.srv-stage{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--brd-2);border-radius:var(--r-md);background:var(--bg-2);color:var(--t2);font-family:var(--ff-h);font-size:var(--fs-sm);font-weight:var(--fw-sb);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.srv-stage:hover{border-color:var(--gold);color:var(--t1)}
.srv-stage.active{border-color:var(--gold);background:rgba(200,146,42,.12);color:var(--gold-l)}
.srv-stage-n{font-size:10px;font-weight:var(--fw-b);color:var(--t3);background:rgba(255,255,255,.06);border-radius:999px;padding:1px 7px}
.srv-stage.active .srv-stage-n{color:var(--gold-l);background:rgba(200,146,42,.18)}
@media(max-width:540px){.srv-stage{flex:1 1 calc(50% - 8px);justify-content:center}}

/* --- регенерация в блоке живучести --- */
.srv-vit em{font-style:normal;font-size:8px;letter-spacing:.02em;color:var(--t3);opacity:.9;margin-top:1px}
.srv-vit.hp em{color:#7fc48a}.srv-vit.mp em{color:#8aa8e0}.srv-vit.cp em{color:var(--gold)}

/* --- матрица: цветные кликабельные заголовки --- */
.srv-mx-cnum{cursor:pointer;border-top:3px solid var(--rc,transparent)}
.srv-mx-cnum:hover{color:var(--gold-l);background:#15131f}
.srv-mx tbody th.srv-mx-rname{cursor:pointer}
.srv-mx tbody th.srv-mx-rname:hover{background:#15131f}
.srv-mx-rname .srv-mx-rn{display:inline-block;min-width:18px;color:var(--gold-l);font-weight:var(--fw-b)}
.srv-mx-rname .srv-mx-rt{color:var(--t1)}
.srv-mx-key span{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.srv-mx-key span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--rc,var(--gold));flex-shrink:0}
.srv-mx-key span:hover b{color:#fff}

/* --- навыки класса (только финальные) 2026-06-17 --- */
.srv-cls-skills{padding-top:8px;border-top:1px solid var(--brd)}
.srv-cls-sk-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:2px 0;cursor:pointer;color:var(--t2);font-family:var(--ff-h);font-size:var(--fs-xs);font-weight:var(--fw-sb);text-align:left}
.srv-cls-sk-toggle:hover{color:var(--t1)}
.srv-cls-sk-sum{margin-left:auto;color:var(--t3);font-weight:var(--fw-m);font-size:10px}
.srv-cls-sk-sum b{font-weight:var(--fw-b)}
.srv-cls-sk-sum b.act{color:#e0a85a}.srv-cls-sk-sum b.pas{color:#8aa8e0}
.srv-cls-sk-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--t3);transition:transform .18s;flex-shrink:0}
.srv-cls.sk-open .srv-cls-sk-caret{transform:rotate(180deg)}
.srv-cls-sk-list{display:none;flex-wrap:wrap;gap:4px;margin-top:8px}
.srv-cls.sk-open .srv-cls-sk-list{display:flex}
.srv-cls-sk{font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid var(--brd-2);color:var(--t2);white-space:nowrap}
.srv-cls-sk.active{border-color:rgba(224,168,90,.35);color:#e6bd86;background:rgba(224,168,90,.07)}
.srv-cls-sk.passive{border-color:rgba(138,168,224,.30);color:#a8bce8;background:rgba(138,168,224,.07)}

/* ── Древо классов (2026-06-17) ── */
.srv-tree{ display:flex; flex-direction:column; gap:clamp(14px,2vw,24px); margin-top:clamp(12px,2vw,22px); }
.srv-tree-race{ background:rgba(255,255,255,.014); border:1px solid rgba(196,162,107,.14); border-radius:14px; overflow:hidden; }
.srv-tree-rhead{ font-weight:600; font-size:var(--fs-lg); line-height:1.1; padding:11px 18px; color:#f2e6cf; border-left:3px solid var(--rc); background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 16%,transparent),transparent); }
.srv-tree-scroll{ overflow-x:auto; overflow-y:hidden; padding:8px 14px 16px; -webkit-overflow-scrolling:touch; }
.srv-tree-cols{ position:relative; height:24px; }
.srv-tree-cols span{ position:absolute; top:0; text-align:center; font-weight:600; font-size:11px; line-height:24px; letter-spacing:.04em; text-transform:uppercase; color:#9a8f7a; }
.srv-tree-canvas{ position:relative; }
.srv-tree-links{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
.srv-tree-links path{ fill:none; stroke-width:1.6; opacity:.5; }
.srv-tnode{ position:absolute; display:flex; align-items:center; gap:7px; padding:5px 7px; background:#15161b; border:1px solid color-mix(in srgb,var(--rc) 40%,transparent); border-left:3px solid var(--rc); border-radius:9px; cursor:pointer; text-align:left; transition:transform .12s ease,box-shadow .12s ease,background .12s ease; overflow:hidden; box-sizing:border-box; }
.srv-tnode:hover{ background:#1c1e25; box-shadow:0 4px 14px rgba(0,0,0,.42); transform:translateY(-1px); z-index:2; }
.srv-tnode.sel{ background:color-mix(in srgb,var(--rc) 22%,#15161b); box-shadow:0 0 0 2px var(--rc); z-index:3; }
.srv-tnode-ico{ width:30px; height:30px; flex:0 0 30px; border-radius:6px; object-fit:cover; background:#0c0d10; }
.srv-tnode-ico.ph{ background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 62%,transparent),#0c0d10 72%); border:1px solid color-mix(in srgb,var(--rc) 48%,transparent); }
.srv-tnode-txt{ display:flex; flex-direction:column; min-width:0; }
.srv-tnode-role{ font-weight:600; font-size:9px; line-height:1.2; letter-spacing:.03em; text-transform:uppercase; color:var(--rc); }
.srv-tnode-name{ font-weight:600; font-size:12px; line-height:1.2; color:#ece3d2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.srv-tree-credit{ margin-top:14px; font-size:11px; line-height:1.4; color:#7d7361; }
.srv-cls-detail{ margin-top:clamp(14px,2vw,22px); max-width:560px; }
.srv-cls-detail-hint{ padding:22px; border:1px dashed rgba(196,162,107,.22); border-radius:12px; color:#8c8270; font-size:var(--fs-sm); text-align:center; }

/* ── Ссылка-атрибуция (официальный портал) ── */
.srv-tree-credit a.srv-ext{color:var(--gold-l);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--gold-l) 60%,transparent);transition:color .15s,border-color .15s}
.srv-tree-credit a.srv-ext:hover,.srv-tree-credit a.srv-ext:focus-visible{color:#ffdf8f;border-bottom-color:#ffdf8f;outline:none}

/* ── Адаптив: брейкпоинты всех блоков (2026-06-17) ── */
@media(min-width:1400px){
  .srv-cls-detail{max-width:640px}
}
@media(max-width:900px){
  .srv-tree-cols span{font-size:10px}
  .srv-tnode-name{font-size:11px}
  .srv-tnode-ico{width:28px;height:28px;flex-basis:28px}
}
@media(max-width:560px){
  .srv-tnode-ico{width:26px;height:26px;flex-basis:26px}
  .srv-tnode-role{font-size:8px}
  .srv-tnode-name{font-size:11px}
  .srv-tnode{gap:6px;padding:4px 6px}
  .srv-tree-rhead{font-size:var(--fs-md);padding:9px 14px}
  .srv-tree-scroll{padding:8px 10px 14px}
  .srv-mx-rname .srv-mx-rt{display:none}
  .srv-mx tbody th.srv-mx-rname,.srv-mx-corner{min-width:46px!important;padding:0 6px}
  .srv-mx-corner{font-size:9px}
  .srv-cmp-slabel{font-size:9px}
  .srv-cmp-hd h4{font-size:var(--fs-sm)}
  .srv-blk-desc{max-width:none}
}
@media(max-width:440px){
  .srv-cmp-pick{grid-template-columns:1fr;gap:10px}
  .srv-cmp-vs{display:none}
  .srv-rate-grid{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
  .srv-cls-detail{max-width:none}
  .srv-cls-stats{grid-template-columns:repeat(3,1fr);gap:4px}
}
@media(max-width:360px){
  .srv-rate-grid{grid-template-columns:repeat(2,1fr)}
  .srv-cls-stats,.srv-cls-vit{gap:3px}
  .srv-cmp-heads{gap:6px}
  .srv-cmp-hd{padding:8px 8px}
}

/* --- Расовый лор: раскрытие по заголовку расы в древе --- */
.srv-tree-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;cursor:pointer;font-family:inherit;border:0;border-left:3px solid var(--rc);-webkit-appearance:none;appearance:none}
.srv-tree-rname{font-weight:600;font-size:var(--fs-lg);line-height:1.1;color:#f2e6cf}
.srv-tree-rtg{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);transition:color .15s;white-space:nowrap}
.srv-tree-rhead:hover .srv-tree-rtg,.srv-tree-rhead:focus-visible .srv-tree-rtg,.srv-tree-rhead.open .srv-tree-rtg{color:var(--gold-l)}
.srv-tree-rhead:focus-visible{outline:2px solid color-mix(in srgb,var(--rc) 60%,transparent);outline-offset:-2px}
.srv-tree-chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-bottom:2px}
.srv-tree-rhead.open .srv-tree-chev{transform:rotate(-135deg);margin-bottom:-2px}
.srv-tree-rlore{max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .2s ease,padding .28s ease;padding:0 18px;border-left:3px solid var(--rc)}
.srv-tree-rlore.open{max-height:340px;opacity:1;padding:2px 18px 14px}
.srv-tree-rlore p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--t2);max-width:74ch}
.srv-tree-rlore-attr{margin-top:8px!important;font-size:var(--fs-xs)!important;color:var(--t3)!important}
.srv-tree-rlore a.srv-ext{color:var(--gold-l);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--gold-l) 60%,transparent);transition:color .15s,border-color .15s}
.srv-tree-rlore a.srv-ext:hover,.srv-tree-rlore a.srv-ext:focus-visible{color:#ffdf8f;border-bottom-color:#ffdf8f;outline:none}
@media(max-width:560px){.srv-tree-rname{font-size:var(--fs-md)}.srv-tree-rtg{font-size:9px}.srv-tree-rlore.open{padding:2px 14px 12px}.srv-tree-rlore{padding:0 14px}}
/* боссы — иерархия силы (2026-06-18) */
.srv-arch-grid{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.2vw,16px)}
@media(min-width:560px){.srv-arch-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.srv-arch-grid{grid-template-columns:repeat(5,1fr)}}
.srv-arch{position:relative;padding:clamp(13px,1.4vw,18px);background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(10,9,26,.5));border:1px solid var(--brd);border-top:2px solid var(--ac,var(--gold));border-radius:var(--r-lg)}
.srv-arch-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.srv-arch-h{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-md);color:var(--ac,var(--gold-l))}
.srv-arch-n{font-family:var(--ff-h);font-size:var(--fs-lg);color:var(--t1)}
.srv-arch-n small{font-size:var(--fs-xs);color:var(--t4);letter-spacing:.08em}
.srv-arch-t{font-size:var(--fs-xs);line-height:1.5;color:var(--t2)}
.srv-boss-cta{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,18px);margin-top:clamp(16px,1.8vw,26px)}
@media(min-width:760px){.srv-boss-cta{grid-template-columns:repeat(2,1fr)}}
.srv-bcta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(16px,1.8vw,24px);background:linear-gradient(160deg,rgba(200,146,42,.06),rgba(10,9,26,.55));border:1px solid var(--brd);border-radius:var(--r-lg);text-decoration:none;transition:border-color .18s,transform .18s}
.srv-bcta:hover{border-color:var(--gold);transform:translateY(-2px)}
.srv-bcta-l{display:flex;flex-direction:column;gap:5px}
.srv-bcta-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--gold-l);opacity:.85}
.srv-bcta-h{font-family:var(--ff-h);font-weight:var(--fw-b);font-size:var(--fs-lg);color:var(--t1)}
.srv-bcta-d{font-size:var(--fs-sm);color:var(--t2);line-height:1.5;max-width:42ch}
.srv-bcta-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
.srv-bcta-num{display:flex;flex-direction:column;align-items:flex-end}
.srv-bcta-n{font-family:var(--ff-h);font-size:var(--fs-2xl);color:var(--gold-l);line-height:1}
.srv-bcta-u{font-size:var(--fs-xs);color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.srv-bcta-arrow{color:var(--gold-l);font-size:22px;line-height:1;transition:transform .18s}
.srv-bcta:hover .srv-bcta-arrow{transform:translateX(4px)}
@media(max-width:480px){.srv-bcta{flex-direction:column;align-items:flex-start}.srv-bcta-r{align-self:flex-end}}

/* enchant curve block */
.srv-en-wrap{margin-top:clamp(14px,2vw,22px)}
.en-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.en-tg-b{background:var(--bg-3,#15151f);border:1px solid var(--brd,#2a2a3a);color:var(--t2,#cfcfe0);font:inherit;font-size:13px;padding:7px 18px;border-radius:20px;cursor:pointer;transition:.15s}
.en-tg-b:hover{border-color:var(--gold-d,#8a6a2a);color:var(--t1,#fff)}
.en-tg-b.on{background:rgba(200,146,42,.14);border-color:var(--gold,#c8922a);color:var(--gold-l,#e8c87a)}
.en-chart{display:flex;align-items:flex-end;gap:2px;height:200px;padding:10px 8px;background:var(--bg-2,#0f0f18);border:1px solid var(--brd,#2a2a3a);border-radius:10px;overflow:hidden}
.en-bar{flex:1 1 0;min-width:2px;background:var(--gold-grd,linear-gradient(180deg,#e8c87a,#c8922a));border-radius:2px 2px 0 0;opacity:.85;transition:opacity .15s}
.en-bar:hover{opacity:1}
.en-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--t4,#8a8a9a);margin-top:6px;padding:0 4px}
.en-grid-cap{font-size:12px;color:var(--t4,#8a8a9a);text-align:center;margin-top:18px;margin-bottom:9px}
.en-grid-area{margin-bottom:4px}
.en-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px}
.en-c{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--bg-2,#0f0f18);border:1px solid var(--brd,#2a2a3a);border-radius:8px}
.en-c b{font-size:12px;color:var(--t2,#cfcfe0);font-weight:600}
.en-c i{font-size:12px;font-style:normal;font-weight:700;letter-spacing:.2px}
.srv-en-facts{margin-top:clamp(14px,2vw,22px)}
.srv-tree-hint{display:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a8f7a;padding:0 14px 10px}
/* 360: хинт горизонтального скролла древа классов (градиент у правого края) */
@media (max-width:760px){
.srv-tree-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.srv-tree-scroll{scrollbar-width:thin;scrollbar-color:rgba(196,162,107,.45) transparent}
.srv-tree-hint{display:block}
}

/* вкладки тиров PvP-матрицы (2026-07-10) */
.srv-mx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.srv-mx-tab{padding:8px 14px;background:var(--surf-2,#15161b);border:1px solid var(--brd,#2a2b33);border-radius:10px;color:#cfc6b4;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}
.srv-mx-tab small{opacity:.65;font-size:11px}
.srv-mx-tab.on{border-color:var(--gold,#c4a26b);color:var(--gold-l,#e8c87a)}
.srv-mx-tab:hover{border-color:var(--gold,#c4a26b)}
.srv-cmp-note{margin:10px 2px 0;font-size:12px;color:#8d8672;line-height:1.5}
.srv-cmp-tierbadge{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#c4a26b)}
.srv-mx td.mx-sel{outline:2px solid var(--gold,#c4a26b);outline-offset:-2px;box-shadow:0 0 8px rgba(196,162,107,.5)}
.srv-cmp-wl{display:block;margin-top:4px;font-size:11px;color:#8d8672}

/* Заточка: кликабельная сетка + панель деталей плюса */
.en-c{font:inherit;cursor:pointer;transition:.13s;text-align:center}
.en-c:hover{border-color:var(--gold-d,#8a6a2a);transform:translateY(-1px)}
.en-c.is-sel{background:rgba(200,146,42,.16);border-color:var(--gold,#c8922a);box-shadow:0 0 0 1px rgba(200,146,42,.35)}
.en-detail-area{margin-top:14px}
.en-detail{background:var(--bg-2,#0f0f18);border:1px solid var(--brd,#2a2a3a);border-radius:12px;padding:16px 18px}
.en-detail-hint{color:var(--t4,#8a8a9a);font-size:13px;text-align:center;padding:20px 16px}
.en-d-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.en-d-lvl{font-family:var(--head,inherit);font-size:26px;font-weight:700;color:var(--gold-l,#e8c87a);line-height:1}
.en-d-item{font-size:13px;color:var(--t3,#a5a5b8);text-transform:uppercase;letter-spacing:.06em}
.en-d-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--brd,#2a2a3a)}
.en-d-k{font-size:13px;color:var(--t2,#cfcfe0)}
.en-d-chance{font-size:16px;font-weight:700;color:var(--gold-l,#e8c87a)}
.en-d-cap{font-size:12px;color:var(--t4,#8a8a9a);margin:12px 0 8px}
.en-d-stat{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;background:rgba(255,255,255,.02);border:1px solid var(--brd,#2a2a3a);border-radius:8px;margin-bottom:6px}
.en-d-stat-n{font-size:12.5px;color:var(--t2,#cfcfe0)}
.en-d-stat-v{font-size:13px;font-weight:700;color:#7ec87e}
.en-d-stat-cut{color:#8fb6e8}
.en-d-note{margin-top:10px;font-size:11.5px;color:var(--t4,#8a8a9a);font-style:italic}
@media(max-width:520px){.en-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}.en-d-lvl{font-size:22px}}

/* Краски: сетка статов + список красок */
.dye-cap{font-size:12px;color:var(--t4,#8a8a9a);text-align:center;margin-bottom:14px}
.dye-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.dye-stat{font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:13px 15px;background:var(--bg-2,#0f0f18);border:1px solid var(--brd,#2a2a3a);border-radius:12px;transition:.13s;text-align:left}
.dye-stat:hover{border-color:var(--gold-d,#8a6a2a);transform:translateY(-1px)}
.dye-stat.is-sel{background:rgba(200,146,42,.16);border-color:var(--gold,#c8922a);box-shadow:0 0 0 1px rgba(200,146,42,.35)}
.dye-stat-n{font-family:var(--head,inherit);font-size:20px;font-weight:700;color:var(--gold-l,#e8c87a);line-height:1}
.dye-stat-d{font-size:11.5px;color:var(--t3,#a5a5b8);line-height:1.35}
.dye-stat-c{font-size:11px;color:var(--t4,#8a8a9a);margin-top:2px}
.dye-list-area{margin-top:14px}
.dye-detail{background:var(--bg-2,#0f0f18);border:1px solid var(--brd,#2a2a3a);border-radius:12px;padding:16px 18px}
.dye-detail-hint{color:var(--t4,#8a8a9a);font-size:13px;text-align:center;padding:20px 16px}
.dye-d-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.dye-d-stat{font-family:var(--head,inherit);font-size:24px;font-weight:700;color:var(--gold-l,#e8c87a);line-height:1}
.dye-d-desc{font-size:12.5px;color:var(--t3,#a5a5b8)}
.dye-row{display:grid;grid-template-columns:1fr auto 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.dye-row:last-child{border-bottom:0}
.dye-r-give,.dye-r-take{display:flex;flex-direction:column;gap:2px}
.dye-r-take{text-align:right}
.dye-r-plus{font-weight:700;font-size:14px;color:#7ec87e}
.dye-r-minus{font-weight:700;font-size:14px;color:#e0736a}
.dye-r-sub{font-size:11px;color:var(--t4,#8a8a9a)}
.dye-r-arrow{color:var(--t4,#8a8a9a);font-size:16px}
.dye-r-lvl{font-size:12px;color:var(--t3,#a5a5b8);white-space:nowrap;text-align:right}
@media(max-width:560px){.dye-row{grid-template-columns:1fr 1fr;gap:5px 10px;row-gap:2px;padding:10px 2px}.dye-r-arrow{display:none}.dye-r-take{text-align:left}.dye-r-lvl{grid-column:1/3;text-align:left;margin-top:3px}}

/* ── Фоновые арты секций ──
   Изображения: Lineage® II © NCSOFT Corporation. Товарный знак NCSOFT.
   Найдены через публичный поиск изображений; используются справочно-атмосферно,
   затемнены оверлеем. Все права на графику принадлежат NCSOFT. */
#sec-sevensigns,#sec-instances{position:relative;overflow:hidden;isolation:isolate}
#sec-sevensigns::before,#sec-instances::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;pointer-events:none}
#sec-sevensigns::before{background-image:linear-gradient(180deg,rgba(8,7,16,.86),rgba(8,7,16,.90) 55%,rgba(8,7,16,.97)),url(/assets/img/server/bg-sevensigns.webp)}
#sec-instances::before{background-image:linear-gradient(180deg,rgba(8,7,16,.88),rgba(8,7,16,.92) 55%,rgba(8,7,16,.97)),url(/assets/img/server/bg-instances.webp)}
#sec-sevensigns .container,#sec-instances .container{position:relative;z-index:1}