/* Карточка монстра (вики NPC) — макет W1D. Чистая разметка по классам.
   Подключается на страницах с мета npc_level. */
.sv-mob{
  --brz:#c89b5a; --cr:#f0e6cf; --mut:#8c8674; --soft:#bdb6a4;
  --panel:#16171c; --panel2:#1c1e25; --bd:#2a2a2f;
  color:var(--soft); font-size:14.5px; line-height:1.6;
  container-type:inline-size; container-name:mob; /* адаптация под ширину колонки, не окна */
}
.sv-mob *{box-sizing:border-box}
.sv-mob{padding-bottom:48px} /* воздух в самом низу страницы */

/* H1 — название монстра, с бронзовым акцентом */
.sv-mob .mob-title{font-size:30px!important;line-height:1.15!important;font-weight:800!important;color:var(--cr)!important;letter-spacing:.01em;margin:0 0 22px!important;padding:0 0 14px!important;border:0!important;position:relative}
.sv-mob .mob-title::after{content:"";position:absolute;left:0;bottom:0;width:66px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brz),rgba(200,155,90,0))}

/* Заголовки секций — с воздухом сверху, чтобы не слипались */
.sv-mob .mob-h{font-weight:700!important;font-size:13px!important;color:var(--brz)!important;letter-spacing:.16em;text-transform:uppercase;margin:44px 0 18px!important;padding:0!important;border:0!important}

/* ВЕРХ: картинка | факты | карта — картинка и карта одинаковые, факты между ними */
.sv-mob .mob-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}
.sv-mob .mob-top > *{height:300px}
.sv-mob .mob-port{position:relative;border-radius:6px;overflow:hidden;background:radial-gradient(130% 130% at 50% 0,#23262f,#0e0f14)}
.sv-mob .mob-port img{width:100%;height:100%;object-fit:cover;display:block}
.sv-mob .mob-port-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.sv-mob .mob-port-ph span{color:#7a7560;font-weight:700;font-size:16px;letter-spacing:.04em}
.sv-mob .mob-id{position:absolute;top:11px;left:11px;z-index:3;background:rgba(10,11,15,.82);color:var(--brz);font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:5px 12px;border:1px solid rgba(200,155,90,.55);border-radius:5px;box-shadow:0 2px 12px rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.sv-mob .mob-map{border-radius:6px;overflow:hidden;background:#0e1118}

/* Факты — вертикальная колонка между картинкой и картой, ячейки равной высоты */
.sv-mob .mob-facts{display:flex;flex-direction:column;gap:8px;margin:0;height:300px;overflow:hidden}
.sv-mob .mob-facts .f{position:relative;flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--panel);border:1px solid var(--bd);border-radius:6px;padding:6px 14px}
.sv-mob .mob-facts .fl{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600}
.sv-mob .mob-facts .fv{font-size:15px;font-weight:700;color:var(--cr);line-height:1.2}
.sv-mob .mob-facts .fv.aggr,.sv-mob .mob-facts .fv.weak{color:#cf8f7f}

/* ОПИСАНИЕ — отдельный блок на всю ширину, без скролла */
.sv-mob .mob-lore{margin-top:14px;background:var(--panel);border:1px solid var(--bd);border-radius:6px;padding:18px 22px;color:var(--soft)}
.sv-mob .mob-lore p{margin:0 0 11px}
.sv-mob .mob-lore p:last-child{margin-bottom:0}

/* Умения — ряд иконок (панель с орнаментом) + нейтральный тултип */
.sv-mob .mob-skillrow{position:relative;display:flex;flex-wrap:wrap;gap:10px;background:var(--panel);border:1px solid var(--bd);border-radius:6px;padding:16px}
.sv-mob .sk{position:relative;width:34px;height:34px;border-radius:5px;background:#0c0e12;border:1px solid var(--bd);cursor:help;outline:none;transition:transform .15s,border-color .15s}
.sv-mob .sk img{width:100%;height:100%;border-radius:4px;display:block}
.sv-mob .sk:hover,.sv-mob .sk:focus{transform:translateY(-2px);border-color:#5a4a2c}
.sv-mob .sk-tip{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);z-index:30;width:250px;
  display:none;background:#20222a;border-radius:6px;padding:12px 14px;text-align:left;box-shadow:0 14px 36px rgba(0,0,0,.6)}
.sv-mob .sk-tip .t{color:var(--cr);font-weight:700;font-size:13.5px}
.sv-mob .sk-tip .lv{color:var(--mut);font-weight:600;font-size:11px;margin-left:6px}
.sv-mob .sk-tip .d{display:block;margin-top:6px;color:#a8a496;font-size:12.5px;line-height:1.5}
.sv-mob .sk-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#20222a}
.sv-mob .sk:hover .sk-tip,.sv-mob .sk:focus .sk-tip{display:block}

/* Характеристики — 3 блока в ряд, с уголком-орнаментом */
.sv-mob .statgrps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.sv-mob .statgrp{position:relative;background:var(--panel);border:0;border-radius:6px;padding:16px 20px 18px}
.sv-mob .statgrp h4{text-align:center;color:var(--brz)!important;font-weight:700!important;font-size:14px!important;letter-spacing:.03em;margin:0 0 14px!important;padding:0!important;border:0!important}
.sv-mob .statgrp .rows{display:grid;grid-template-columns:1fr;gap:11px}
.sv-mob .statgrp .p{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.sv-mob .statgrp .k{color:var(--mut);font-size:13px;white-space:nowrap}
.sv-mob .statgrp .v{color:var(--cr);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.sv-mob .statgrp .p-hp .v{color:#e98a8a}
.sv-mob .statgrp .p-mp .v{color:#8ab4e8}
.sv-mob .statgrp .p-exp .v,.sv-mob .statgrp .p-sp .v{color:#e7c069}

/* Уголки-орнаменты на блоках */
.sv-mob .mob-facts .f::before,.sv-mob .statgrp::before,.sv-mob .mob-skillrow::before{
  content:"";position:absolute;top:8px;right:8px;width:13px;height:13px;border-top:1px solid var(--brz);border-right:1px solid var(--brz);opacity:.4}

/* Дроп и спойл — две независимые таблицы в одном блоке, с вертикальным разделителем */
.sv-mob .mob-tw{border:1px solid var(--bd);border-radius:6px;overflow:hidden;background:var(--panel)}
.sv-mob .mob-combo{display:flex;align-items:flex-start;position:relative}
.sv-mob .mob-half{flex:1 1 0;min-width:0;display:block}
.sv-mob .mob-combo::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--bd);z-index:1}
/* шапка секции — выразительно отделяет «Дроп» и «Спойл» */
.sv-mob .mob-half-h{text-align:center;color:var(--brz);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 10px;
  background:linear-gradient(180deg,#1f212a,#191a20);border-bottom:1px solid #34322a}
/* жёсткий сброс — чтобы таблица не наследовала общие стили темы */
.sv-mob table.mob-dt,.sv-mob .mob-dt tr,.sv-mob .mob-dt th,.sv-mob .mob-dt td{
  box-shadow:none!important;text-shadow:none!important;font-family:inherit!important;border-radius:0!important;border:0!important;outline:0!important}
.sv-mob table.mob-dt{width:100%!important;height:auto!important;border-collapse:collapse!important;border-spacing:0!important;font-size:13.5px!important;margin:0!important;table-layout:auto!important;display:table!important}
.sv-mob .mob-dt tr{display:table-row!important}
.sv-mob .mob-dt th,.sv-mob .mob-dt td{height:auto!important;background:transparent!important;white-space:normal!important;vertical-align:middle!important;display:table-cell!important;text-transform:none}
.sv-mob .mob-dt thead th{color:var(--mut)!important;padding:10px 16px!important;font-weight:500!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.03em;text-align:right;background:var(--panel2)!important;border-bottom:1px solid var(--bd)!important}
.sv-mob .mob-dt th.l{text-align:left}
.sv-mob .mob-dt th.s{cursor:pointer;user-select:none;white-space:nowrap}
.sv-mob .mob-dt th.s::after{content:"\21C5";margin-left:6px;font-size:13px;color:var(--brz);opacity:.65;vertical-align:-1px}
.sv-mob .mob-dt th.s:hover::after{opacity:1}
.sv-mob .mob-dt th.s.asc::after{content:"\2191";opacity:1}
.sv-mob .mob-dt th.s.desc::after{content:"\2193";opacity:1}
.sv-mob .mob-dt td{padding:9px 16px!important;text-align:right;color:#cfc9ba!important;font-weight:400!important}
.sv-mob .mob-dt td.l{text-align:left}
.sv-mob .mob-dt td.num{font-weight:500!important;color:var(--cr)!important}
.sv-mob .mob-dt tbody td{background:transparent!important}
.sv-mob .mob-dt tbody tr:nth-child(odd) td{background:rgba(255,255,255,.022)!important}
.sv-mob .mob-dt tbody tr:hover td{background:rgba(200,155,90,.06)!important}
.sv-mob .it{display:flex;align-items:center;gap:10px;min-width:0}
.sv-mob .it img{width:28px!important;height:28px!important;border-radius:4px;flex:0 0 auto}
.sv-mob .itn{font-weight:500;min-width:0;overflow-wrap:anywhere}
.sv-mob .qn{color:#d8d2c2}
.sv-mob .qid{display:inline-block;margin-left:14px;font-size:11px;font-weight:700;color:var(--brz);border:1px solid rgba(200,155,90,.45);border-radius:4px;padding:1px 7px;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}

/* === Страница предмета (.sv-item — переиспользует .sv-mob) === */
.sv-mob .it-grade{display:inline-block;font-size:14px;font-weight:800;border:1px solid;border-radius:5px;padding:0 9px;vertical-align:middle;margin-left:8px;line-height:1.5}
.sv-item .it-top{grid-template-columns:112px 1fr;align-items:start}
.sv-item .it-top > *{height:auto}
.sv-item .it-icon{position:relative;display:flex;align-items:center;justify-content:center;min-height:112px;background:radial-gradient(130% 130% at 50% 0,#23262f,#0e0f14)}
.sv-item .it-icon img{width:56px;height:56px;object-fit:contain;border-radius:6px}
.sv-item .it-icon .mob-id{font-size:10px;padding:3px 7px;top:7px;left:7px}
.sv-item .it-top .mob-facts{flex-direction:row;flex-wrap:wrap;height:auto;align-content:flex-start;gap:10px}
.sv-item .it-top .mob-facts .f{flex:1 1 28%;min-width:130px}
.sv-item .mob-facts .f .fv{font-variant-numeric:tabular-nums}

/* Дерево крафта (компактный блок, не на всю ширину) */
.sv-mob .it-craft{max-width:580px}
.sv-mob .ct-head{padding:11px 16px;color:var(--mut);font-size:12px;background:var(--panel2);border-bottom:1px solid var(--bd)}
.sv-mob .ct-hint{padding:8px 16px 4px;color:var(--mut);font-size:11.5px;font-style:italic}
.sv-mob .craft-tree{padding:2px 0 8px}
.sv-mob .ct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px}
.sv-mob .ct-i{display:flex;align-items:center;gap:9px;min-width:0}
.sv-mob .ct-i img{border-radius:4px;flex:0 0 auto}
.sv-mob .ct-n{font-weight:600;color:var(--cr);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-mob .ct-node>summary{list-style:none;cursor:pointer}
.sv-mob .ct-node>summary::-webkit-details-marker{display:none}
.sv-mob .ct-node>summary .ct-i::before{content:"\25B8";color:var(--brz);font-size:11px;flex:0 0 auto;width:11px;text-align:center}
.sv-mob .ct-node[open]>summary .ct-i::before{content:"\25BE"}
.sv-mob .ct-leaf .ct-i{padding-left:20px}
.sv-mob .ct-children{margin-left:20px;border-left:1px solid var(--bd)}
.sv-mob .craft-tree .ct-row:hover{background:rgba(200,155,90,.06)}
/* характеристики — компактный блок, не на всю ширину */
.sv-item .it-stats{display:block}
.sv-item .it-stats .statgrp{display:inline-block;width:auto;min-width:250px;max-width:360px;padding:14px 18px}
.sv-item .it-stats .statgrp .rows{grid-template-columns:1fr;gap:9px}
/* свойства */
.sv-mob .it-props{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sv-mob .it-prop{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:4px;border:1px solid var(--bd);color:var(--soft)}
.sv-mob .it-prop.y{color:#9fe0a0;border-color:#2f4a32}
.sv-mob .it-prop.n{color:#cf8f7f;border-color:#4a2f2f}
/* список SA */
/* характеристики | SA — в один ряд, обе колонки по содержимому */
.sv-item .it-cols{display:grid;grid-template-columns:auto auto;justify-content:start;gap:16px;align-items:start;margin-top:44px}
.sv-item .it-cols > .mob-fold{margin-top:0;min-width:0}
.sv-item .it-sa-fold{max-width:480px}
@media(max-width:760px){.sv-item .it-cols{grid-template-columns:1fr}.sv-item .it-sa-fold{max-width:none}}
/* список SA */
.sv-mob .sa-list{display:flex;flex-direction:column}
.sv-mob .sa-row{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.04)}
.sv-mob .sa-row:last-child{border-bottom:0}
.sv-mob .sa-row,.sv-mob .sa-row *{text-shadow:none!important;box-shadow:none!important;filter:none!important}
.sv-mob .sa-ic{border-radius:4px;flex:0 0 auto;margin-top:1px}
.sv-mob .sa-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sv-mob .sa-nm{font-weight:600}
.sv-mob .sa-d{font-size:12px;color:var(--mut);font-weight:400;line-height:1.4}
.sv-mob .sa-row:hover{background:rgba(255,255,255,.035)}
.sv-mob .sa-row:hover .sa-nm{text-decoration:underline}
.sv-mob .it-link{color:var(--cr);text-decoration:none;transition:color .15s}
.sv-mob .it-link:hover{color:var(--brz);text-decoration:underline}
.sv-mob .it-flavor{color:var(--mut);font-style:italic;font-size:13px;margin-top:8px}
@media(max-width:600px){.sv-item .it-top{grid-template-columns:1fr}}
.sv-mob .mob-mut{color:var(--mut);padding:12px 0}

/* Сворачиваемые секции (характеристики / дроп / квесты / herbs) — единый стиль */
.sv-mob .mob-fold{margin-top:44px}
.sv-mob .mob-foldh{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;margin:0;padding:0;
  font-weight:700;font-size:13px;color:var(--brz);letter-spacing:.16em;text-transform:uppercase}
.sv-mob .mob-foldh::-webkit-details-marker{display:none}
.sv-mob .mob-foldh::before{content:"\25BE";font-size:11px;opacity:.85}
.sv-mob .mob-fold:not([open]) > .mob-foldh::before{content:"\25B8"}
.sv-mob .mob-fold[open] > .mob-foldh{margin-bottom:18px}

/* Адаптив — по ширине КОЛОНКИ (container queries) */
@container mob (max-width:760px){
  .sv-mob .mob-top{grid-template-columns:1fr}
  .sv-item .it-top{grid-template-columns:1fr}
  .sv-mob .mob-top > *{height:auto}
  .sv-mob .mob-top .mob-port,.sv-mob .mob-top .mob-map{height:240px}
  .sv-mob .mob-facts{flex-direction:row;flex-wrap:wrap;height:auto}
  .sv-mob .mob-facts .f{flex:1 1 40%;min-width:130px}
  .sv-mob .statgrps{grid-template-columns:1fr}
  .sv-mob .mob-combo{flex-direction:column}
  .sv-mob .mob-half{flex:none;width:100%}
  .sv-mob .mob-combo::before{display:none}
  .sv-mob .mob-half + .mob-half{border-top:1px solid var(--bd)}
}
@container mob (max-width:440px){
  .sv-mob .sk-tip{width:min(250px,78vw)}
}
/* Универсальный viewport-фолбэк для мобильных (на случай, если container-queries не сработали):
   обязательно складываем дроп/спойл в столбец, иначе две таблицы сплющиваются и обрезаются */
@media(max-width:600px){
  .sv-mob .mob-top{grid-template-columns:1fr}
  .sv-mob .mob-top > *{height:auto}
  .sv-mob .mob-top .mob-port,.sv-mob .mob-top .mob-map{height:240px}
  .sv-mob .mob-facts{flex-direction:row;flex-wrap:wrap;height:auto}
  .sv-mob .mob-facts .f{flex:1 1 40%;min-width:130px}
  .sv-mob .statgrps{grid-template-columns:1fr}
  .sv-mob .mob-combo{flex-direction:column}
  .sv-mob .mob-half{flex:none;width:100%}
  .sv-mob .mob-combo::before{display:none}
  .sv-mob .mob-half + .mob-half{border-top:1px solid var(--bd)}
}
/* запасной вариант без container-queries (планшет/узкая колонка) */
@supports not (container-type:inline-size){
  @media(max-width:980px){
    .sv-mob .mob-top{grid-template-columns:1fr} .sv-mob .mob-top > *{height:auto}
    .sv-mob .mob-top .mob-port,.sv-mob .mob-top .mob-map{height:240px} .sv-mob .statgrps{grid-template-columns:1fr}
    .sv-mob .mob-combo{flex-direction:column}
  .sv-mob .mob-half{flex:none;width:100%} .sv-mob .mob-combo::before{display:none}
    .sv-mob .mob-half + .mob-half{border-top:1px solid var(--bd)}
  }
}