/* ============================================================
   Клан Д'ксан - иммерсивная джунглевая тема (изолирована от style.css).
   Арт-слоты: CSS-переменные с процедурным фолбэком (нет файла -> рисуется градиент).
   Положи файлы в /img/factions/merc/: bamboo.webp, wood-wall.webp, sigil.png,
   canopy.png, leaf1..3.png. Пока их нет - страница живёт на заглушках.
   ============================================================ */
/* фирменный шрифт сайта Acrom (все веса) + дисплейный шрифт клана Jungle */
@font-face{font-family:"Acrom";src:url(/fonts/acrom-thin.ttf) format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Acrom";src:url(/fonts/acrom-light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Acrom";src:url(/fonts/acrom-regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Acrom";src:url(/fonts/acrom-medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Acrom";src:url(/fonts/acrom-bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Acrom";src:url(/fonts/acrom-extrabold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Jungle";src:url(/fonts/JungleBold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --deep:#06120b; --ground:#0a1a10; --canopy:#173425; --leaf:#4f7d38; --leaf-hi:#8bb85a;
  --bamboo:#cdb682; --bamboo-hi:#e6d3a3; --bamboo-lo:#6f5a2c;
  --wood:#3a2917; --wood-hi:#5c4227; --brass:#d8a441; --brass-hi:#f0c66a;
  --bone:#ece3cd; --bone-dim:#b3ab90; --slab:rgba(10,20,13,.72);
  /* арт-слоты (замени файлами) */
  --tex-bamboo:url(/img/factions/merc/bamboo-pole.png?v=1);
  --tex-wood:url(/img/factions/merc/wood-wall.png?v=1);
  --art-sigil:url(/img/factions/merc/sigil.png?v=13);
  --art-ped-cmd:url(/img/factions/merc/pedestal-cmd.png?v=2);
  --art-ped-dep:url(/img/factions/merc/pedestal-dep.png?v=2);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body.merc{
  min-height:100vh; color:var(--bone); background:var(--deep);
  font-family:"Acrom",system-ui,sans-serif; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

/* ---- фон-видео + грейд + атмосфера ---- */
.merc-video{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.02)}
.merc-video__grade{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,10,6,.35) 0%, rgba(4,10,6,.15) 30%, rgba(4,10,6,.55) 70%, var(--deep) 100%),
    radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(3,8,5,.6) 100%)}
.merc-atmo{position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
.merc-vig{position:fixed; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(2,7,4,.7)}
/* нависающая крона сверху: PNG-силуэт = маска, заливка = материал (градиент+просвет+нойз) */
.merc-canopy{position:fixed; top:0; left:-5%; width:110%; max-width:none; aspect-ratio:1344/768; z-index:3; pointer-events:none;
  transform-origin:top center; will-change:transform;
  -webkit-mask:url(/img/factions/merc/canopy.png?v=3) top center/100% auto no-repeat;
          mask:url(/img/factions/merc/canopy.png?v=3) top center/100% auto no-repeat;
  background:
    url(/img/factions/merc/canopy-tex.png?v=1) top left/440px 440px repeat,
    radial-gradient(130% 62% at 50% -6%, rgba(158,176,98,.28), rgba(158,176,98,0) 55%),
    linear-gradient(180deg, #2a441f 0%, #1a2f12 30%, #0d1f0d 48%, #0a190b 100%);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
/* передний бамбук по краям экрана (широкие экраны, тёмное обрамление «сквозь заросли») */
.merc-edge{position:fixed; top:0; bottom:0; width:clamp(56px,7vw,104px); z-index:6; pointer-events:none;
  background:var(--tex-bamboo) center/cover; filter:brightness(.46) saturate(.82)}
.merc-edge::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,11,7,0) 22%, rgba(5,11,7,.92) 100%)}
.merc-edge--l{left:0}
.merc-edge--r{right:0; transform:scaleX(-1)}
@media (max-width:1240px){ .merc-edge{display:none} }
/* грибной «пол» снизу: темнее и ПОД дымкой (z1), меньше, параллакс из-за нижней кромки (JS) */
.merc-floor{position:fixed; left:0; bottom:0; width:100%; aspect-ratio:1344/768; z-index:1; pointer-events:none;
  transform-origin:bottom center; transform:translateY(0); will-change:transform;
  filter:brightness(.4) saturate(.82) blur(.5px);
  background:url(/img/factions/merc/mushrooms.png?v=2) bottom center/100% auto no-repeat}

/* ---- навигация ---- */
.merc-nav{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:flex-end; padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(6,16,10,.85), transparent);
  backdrop-filter:blur(2px)}
.merc-nav__brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-family:"Acrom";
  font-weight:600; font-size:19px; letter-spacing:.06em; text-transform:uppercase; color:#efe6cf}
.merc-nav__brand b{color:var(--brass-hi)}
.merc-nav__sigil{width:34px; height:34px; flex:0 0 auto; border-radius:8px;
  background:var(--art-sigil) center/contain no-repeat,
    radial-gradient(circle at 50% 42%, #2f5a34, #12281a); border:1px solid rgba(216,164,65,.4)}
.merc-nav__links{display:flex; gap:22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.merc-nav__links a{color:var(--bone-dim); text-decoration:none; transition:color .15s}
.merc-nav__links a:hover{color:var(--brass-hi)}

/* ---- герой (высокая сцена: видео скрабится по скроллу) ---- */
.merc-main{position:relative; z-index:4}
.merc-hero{height:100vh; position:relative}
.merc-hero__inner{height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.merc-crest{width:clamp(150px,22vw,250px); aspect-ratio:431/644; margin-bottom:8px;
  background:var(--art-sigil) center/contain no-repeat;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.75))}
.merc-title{margin:0; font-family:"Jungle","Acrom",sans-serif; font-weight:700;
  font-size:clamp(80px,20vw,240px); line-height:.86; letter-spacing:.01em; color:#f4ecd6;
  text-shadow:0 3px 0 #1a1108, 0 7px 0 #120b05, 0 20px 50px rgba(0,0,0,.7)}
.merc-sub{margin:14px 0 0; font-family:"Acrom","Acrom",sans-serif; font-weight:700;
  font-size:clamp(13px,2vw,17px); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-hi);
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.merc-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 30px; margin-top:40px}
.merc-stat{align-items:center}
.merc-stat{display:flex; flex-direction:column; gap:2px}
.merc-stat__lab{font-family:"Acrom","Acrom",sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass)}
.merc-stat__val{font-family:"Acrom","Acrom",sans-serif; font-weight:800; font-size:26px; color:#efe6cf; font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* ---- тело поверх удержанного кадра видео ---- */
.merc-body{position:relative; z-index:4; max-width:1000px; margin:0 auto;
  padding:10px clamp(16px,5vw,56px) 80px}

/* ---- бамбуковая плита ---- */
.merc-slab{position:relative; margin:34px 0 0; padding:24px clamp(18px,3vw,32px);
  background:var(--slab); backdrop-filter:blur(6px); border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(205,182,130,.14)}
.merc-slab::before,.merc-slab::after{content:""; position:absolute; top:-14px; bottom:-14px; width:22px;
  border-radius:12px; box-shadow:0 12px 26px rgba(0,0,0,.5);
  background:
    var(--tex-bamboo) center/100% 260px repeat-y,
    repeating-linear-gradient(180deg, transparent 0 58px, rgba(0,0,0,.35) 58px 61px, rgba(230,211,163,.5) 61px 64px, transparent 64px 66px),
    linear-gradient(90deg, var(--bamboo-lo), var(--bamboo) 40%, var(--bamboo-hi) 52%, var(--bamboo) 64%, #5c4a22)}
.merc-slab::before{left:-15px} .merc-slab::after{right:-15px}
.merc-slab__title{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(205,182,130,.18)}
.merc-slab__title h2{margin:0; font-family:"Acrom"; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:22px; color:#efe6cf}
.merc-slab__tools{display:flex; align-items:center; gap:14px}
#memberSearch{font:inherit; font-size:14px; color:var(--bone); padding:9px 14px; border-radius:8px;
  border:1px solid rgba(205,182,130,.3); background:rgba(6,16,10,.6); min-width:220px}
#memberSearch:focus{outline:none; border-color:var(--brass)}
.merc-count{font-size:13px; color:var(--bone-dim); white-space:nowrap}

/* ---- командование: имя прямо над каменным пьедесталом; командир в центре, замы ниже-справа ---- */
.merc-leaders{display:flex; flex-direction:column; align-items:center; padding:16px 0 6px}
.merc-lead{display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer;
  background:none; border:0; padding:0; transition:transform .15s}
.merc-lead:hover{transform:translateY(-3px)}
.merc-lead:hover .merc-lead__name{color:var(--brass-hi)}
.merc-lead__role{font-family:"Acrom"; font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.merc-lead__name{font-family:"Acrom"; font-weight:800; font-size:20px; color:#f2ead3; margin-top:2px; transition:color .15s; text-shadow:0 2px 10px rgba(0,0,0,.7)}
.merc-lead__num{color:var(--bone-dim); font-weight:500; font-size:13px}
.merc-lead__sub{font-family:"Acrom"; font-weight:500; font-size:12.5px; color:var(--bone-dim); margin-top:1px}
.merc-lead::after{content:""; margin-top:3px; background-position:bottom center; background-repeat:no-repeat; background-size:contain}
.merc-lead--cmd::after{width:min(330px,76vw); aspect-ratio:306/121; background-image:var(--art-ped-cmd); filter:drop-shadow(0 16px 16px rgba(0,0,0,.6))}
.merc-lead--dep::after{width:min(250px,60vw); aspect-ratio:219/52; background-image:var(--art-ped-dep); filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
/* замы фланкируют командира: один слева, один справа, ниже него */
.merc-deps{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:clamp(40px,11vw,170px); align-self:stretch; margin-top:12px}
@media (max-width:640px){ .merc-deps{gap:24px; margin-top:14px} }

/* ---- таблица состава ---- */
.merc-tablewrap{overflow-x:auto}
.merc-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:0}
.merc-table thead th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); font-weight:600; padding:0 9px 12px; cursor:pointer; user-select:none; white-space:nowrap}
.merc-table thead th:hover{color:var(--brass-hi)}
.merc-table tbody td{padding:11px 9px; border-top:1px solid rgba(205,182,130,.10); font-variant-numeric:tabular-nums; vertical-align:middle; white-space:nowrap}
.merc-table tbody tr{transition:background .13s; cursor:pointer}
.merc-table tbody tr:hover{background:rgba(139,184,90,.08)}
.who{display:flex; align-items:center; gap:11px}
.who__sig{width:30px; height:30px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,#2b4a30,#16301d); border:1px solid rgba(205,182,130,.25);
  font-family:"Acrom"; font-weight:600; font-size:14px; color:var(--leaf-hi)}
.who b{font-weight:600; color:#efe6cf}
.role-badge{display:inline-block; font-size:10px; letter-spacing:.08em; padding:2px 8px; border-radius:999px; font-weight:700}
.role-badge--leader{background:rgba(216,164,65,.16); color:var(--brass-hi); border:1px solid rgba(216,164,65,.45)}
.role-badge--deputy{background:rgba(139,184,90,.14); color:var(--leaf-hi); border:1px solid rgba(139,184,90,.4)}
.rank-short{color:var(--bamboo); font-weight:600} .rank-name{color:var(--bone-dim); font-size:12.5px}
.seen-on{color:var(--leaf-hi)} .seen-off{color:var(--bone-dim)}
.warn-chip{font-size:11px; color:#e8b0a0}

/* ---- журнал ---- */
.merc-logs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13.5px}
.merc-logs li{display:flex; align-items:center; gap:16px; padding:9px 0; border-bottom:1px solid rgba(205,182,130,.1)}
.merc-log__l{flex:1 1 auto; min-width:0; color:#e6ddc6; font-family:"Acrom"; font-weight:500}
.merc-log__l em{color:var(--bone-dim); font-style:normal; font-weight:400}
.merc-log__amt{flex:0 0 auto; min-width:96px; text-align:right; font-family:"Acrom"; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums}
.merc-log__amt.pos{color:#7fd06a} .merc-log__amt.neg{color:#e6836e}
.merc-log__ts{flex:0 0 auto; min-width:132px; text-align:right; white-space:nowrap; color:var(--bone-dim); font-size:12.5px}
@media (max-width:560px){ .merc-log__ts{min-width:0} .merc-log__amt{min-width:0} }

/* ---- футер ---- */
.merc-foot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:44px;
  padding-top:20px; border-top:1px solid rgba(205,182,130,.14); font-size:13px; color:var(--bone-dim);
  letter-spacing:.04em}
.merc-foot a{color:var(--brass); text-decoration:none}

/* ---- попап досье (стена из досок + бамбуковая рамка) ---- */
.merc-scrim{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px;
  background:rgba(3,9,5,.7); backdrop-filter:blur(4px)}
.merc-scrim[hidden]{display:none}
.merc-card{position:relative; width:min(620px,94vw); overflow:visible; border-radius:5px;
  padding:30px 34px; color:#4a3620;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.16 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E") top left/180px 180px repeat,
    linear-gradient(180deg, rgba(74,52,20,.55) 0, rgba(74,52,20,0) 7%, rgba(74,52,20,0) 93%, rgba(74,52,20,.55) 100%),
    radial-gradient(130% 120% at 50% 45%, #efe4c8 0%, #e6d6b2 55%, #d6c393 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:mercRise .3s cubic-bezier(.2,.9,.3,1)}
@keyframes mercRise{from{transform:translateY(16px) scale(.98); opacity:0}}
.merc-card::before,.merc-card::after{content:""; position:absolute; top:-9px; bottom:-9px; width:16px; border-radius:9px;
  background:var(--tex-bamboo) center/100% 220px repeat-y,
    linear-gradient(90deg,var(--bamboo-lo),var(--bamboo) 45%,var(--bamboo-hi) 55%,#5c4a22);
  box-shadow:0 8px 18px rgba(0,0,0,.5)}
.merc-card::before{left:-9px} .merc-card::after{right:-9px}
.merc-card__close{position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:8px; cursor:pointer;
  background:rgba(90,60,25,.16); border:1px solid rgba(90,60,25,.42); color:#5a3e18; font-size:17px}
.merc-card__close:hover{border-color:#6a4718; background:rgba(90,60,25,.3)}
.merc-card__title{font-family:"Acrom"; font-weight:800; text-transform:uppercase; font-size:24px; color:#3a2712;
  margin-bottom:18px; padding-right:40px; padding-bottom:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='7'%3E%3Cpath d='M2 4 L34 2.6 L66 4.4 L98 3 L132 4 L166 2.7 L202 4.3 L238 3 L272 4.2 L318 2.9' stroke='%236a4a24' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") bottom left/300px 7px repeat-x}
.merc-card__title small{display:block; font-family:"Acrom"; text-transform:none; font-size:13px; color:#7a5626; letter-spacing:.04em; margin-top:5px; font-weight:500}
.merc-card__body{max-height:64vh; overflow:auto; margin-right:-8px; padding-right:8px}
.merc-dossier{display:grid; grid-template-columns:1fr 1fr; gap:2px 26px}
.merc-dossier div{display:flex; justify-content:space-between; gap:12px; padding:9px 0 11px; font-size:14px; font-family:"Acrom"; font-weight:500;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6'%3E%3Cpath d='M1 3.2 L26 2.3 L52 3.8 L80 2.6 L110 3.5 L140 2.4 L172 3.9 L204 2.8 L238 3.2' stroke='%237a5626' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") bottom left/200px 6px repeat-x}
.merc-dossier span:first-child{color:#8a7448} .merc-dossier span:last-child{color:#3a2712; font-weight:700; font-variant-numeric:tabular-nums}
.merc-sect{margin-top:20px}
.merc-sect h4{margin:0 0 8px; font-family:"Acrom"; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:14px; color:#6a4718}
.merc-warn{padding:8px 12px; border-radius:6px; background:rgba(120,90,45,.12); border:1px solid rgba(120,90,45,.32); margin-bottom:6px; font-size:13px; font-family:"Acrom"; color:#4a3620}
.merc-warn small{color:#8a7448}
.merc-empty{color:var(--bone-dim); font-size:13px}
.merc-card .merc-empty{color:#8a7448}
.merc-card .btn-ghost{background:rgba(90,60,25,.14); border-color:rgba(90,60,25,.4); color:#4a3620}
.merc-card .btn-ghost:hover{border-color:#6a4718}
.merc-loading{color:var(--bone-dim); font-size:13px; padding:10px 0}
.btn-ghost{cursor:pointer; font:inherit; font-size:13px; padding:8px 14px; border-radius:8px;
  background:rgba(0,0,0,.25); border:1px solid rgba(205,182,130,.3); color:var(--bone)}
.btn-ghost:hover{border-color:var(--brass)}

:focus-visible{outline:2px solid var(--brass-hi); outline-offset:2px}

@media (max-width:640px){
  .merc-dossier{grid-template-columns:1fr}
  .merc-hero{height:100vh}
}
@media (prefers-reduced-motion: reduce){
  .merc-atmo{display:none}
  .merc-hero{height:100vh}
  .merc-hero__inner{height:auto; min-height:100vh}
}

/* Тег отряда/отдела рядом с именем в реестре */
.cf-utag{--fu:currentColor;display:inline-block;margin-left:8px;padding:1px 6px;
  font-size:9px;letter-spacing:.08em;vertical-align:middle;opacity:.9;
  color:var(--fu);border:1px solid color-mix(in srgb,var(--fu) 45%,transparent)}