/* xk-ally.css — тема альянсов (поверх xk-tech.css). Сине-стальной щит-акцент. */
.xs-ally{--xs-hero-c1:rgba(42,125,225,.2);--xs-hero-c2:rgba(32,176,184,.14)}
.xs-ally .xs-tech-badge{color:var(--xh-blue-light);background:radial-gradient(circle at 50% 40%, rgba(42,125,225,.2), rgba(6,10,20,.6) 70%);border-color:rgba(42,125,225,.4)}
.xs-ally .xs-sec-title{border-left-color:var(--xh-blue)}
.xs-ally .xs-tag--fleet{color:var(--xh-blue-soft);background:rgba(42,125,225,.16);border-color:rgba(42,125,225,.42)}
.xs-ally .xs-tag--tier{color:var(--xh-cyan-soft);background:rgba(32,176,184,.16);border-color:rgba(32,176,184,.4)}
.xs-ally .xs-nav a.is-active{color:var(--xh-blue-light);border-left-color:var(--xh-blue-light);background:rgba(42,125,225,.08)}
.xs-ally .xs-effect-val b,.xs-ally .xs-tbl td:first-child{color:var(--xh-blue-light)}
.xs-ally .xs-note a,.xs-ally .xs-sec-lead a{color:var(--xh-blue-light)}
.xs-ally .xs-req-lvl{color:var(--xh-blue-soft);background:rgba(42,125,225,.14);border-color:rgba(42,125,225,.32)}
.xs-src-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.xs-src-list li{position:relative;padding-left:20px;font-size:14px;color:var(--xh-text-secondary)}
.xs-src-list li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--xh-blue-light)}

/* ── Мягкая окраска страницы фракции в её цвет (owner 9444) ──
   --_fc задан инлайн на <main.xs-ally-frac> из единого источника config/fraction-colors.php.
   Приём: переопределяем сине-стальные токены темы на цвет фракции (акценты сами перекрашиваются)
   + бледный атмосферный фон-вошинг сверху. «Не слишком ярко» — фон ~5%, читаемость не страдает. */
.xs-ally-frac{--xh-blue-light:var(--_fc);--xh-blue:var(--_fc);
  --xh-blue-soft:color-mix(in srgb,var(--_fc) 72%,#fff 28%);
  --xh-cyan-soft:color-mix(in srgb,var(--_fc) 66%,#fff 34%)}
.xs-ally-frac .xs-tech-badge{color:color-mix(in srgb,var(--_fc) 80%,#fff);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--_fc) 20%,transparent),rgba(6,10,20,.6) 70%);border-color:color-mix(in srgb,var(--_fc) 40%,transparent)}
.xs-ally-frac .xs-tag--fleet{color:color-mix(in srgb,var(--_fc) 82%,#fff);background:color-mix(in srgb,var(--_fc) 16%,transparent);border-color:color-mix(in srgb,var(--_fc) 42%,transparent)}
.xs-ally-frac .xs-tag--tier{color:color-mix(in srgb,var(--_fc) 80%,#fff);background:color-mix(in srgb,var(--_fc) 15%,transparent);border-color:color-mix(in srgb,var(--_fc) 40%,transparent)}
.xs-ally-frac .xs-nav a.is-active{background:color-mix(in srgb,var(--_fc) 9%,transparent)}
.xs-ally-frac .xs-req-lvl{color:color-mix(in srgb,var(--_fc) 78%,#fff);background:color-mix(in srgb,var(--_fc) 14%,transparent);border-color:color-mix(in srgb,var(--_fc) 32%,transparent)}
.xs-ally-frac .xs-src-list li::before{background:var(--_fc)}
.xs-ally-frac .xs-layout{background:linear-gradient(180deg,color-mix(in srgb,var(--_fc) 5%,transparent),transparent 360px),var(--xh-bg-primary)}

/* Флаги фракции — галерея (owner 9274) */
.xs-flags{display:flex;flex-wrap:wrap;gap:24px 26px;margin-top:10px}
/* #9388: раньше тёмный флаг на тёмном фоне (--xh-bg-deep) «тонул» и выглядел пустым.
   Теперь плитка — светлее, с мягким подсветом в цвете фракции (--_fc задаётся на .xs-ally-frac),
   вниз затемняется (виньетка) → тёмное полотнище флага читается и выглядит «подвешенным». */
.xs-flag{width:120px;height:120px;border-radius:var(--xh-radius-md);overflow:hidden;
  background:radial-gradient(120% 92% at 50% 20%,color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 24%,var(--xh-bg-card)) 0%,var(--xh-bg-card) 48%,var(--xh-bg-deep) 100%);
  border:1px solid color-mix(in srgb,var(--_fc,var(--xh-border)) 45%,var(--xh-border));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -26px 42px -18px rgba(0,0,0,.55),0 2px 10px -4px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--xh-transition),transform var(--xh-transition),box-shadow var(--xh-transition)}
.xs-flag:hover{border-color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 72%,transparent);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -26px 42px -18px rgba(0,0,0,.5),0 8px 22px -8px color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 42%,transparent)}
.xs-flag img{width:100%;height:100%;object-fit:contain;padding:10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* #9388 (owner 9519): под каждым флагом — требования открытия. Первый чип = уровень, с которого флаг
   доступен (подсвечен цветом фракции); остальные три — уровни доп. цветовых вариантов. */
.xs-flag-card{display:flex;flex-direction:column;gap:8px;align-items:center;width:120px}
.xs-flag-meta{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.xs-flag-open{font-size:12px;color:var(--xh-text-secondary)}
.xs-flag-open b{color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 78%,var(--xh-white));font-weight:800}
.xs-flag-tiers{display:flex;gap:4px}
.xs-flag-tier{min-width:20px;padding:2px 5px;border-radius:6px;font-size:11px;font-weight:700;text-align:center;color:var(--xh-text-soft);background:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 10%,var(--xh-bg-card));border:1px solid color-mix(in srgb,var(--_fc,var(--xh-border)) 26%,var(--xh-border))}
.xs-flag-tier--1{color:var(--xh-white);background:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 52%,var(--xh-bg-card));border-color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 58%,transparent)}
/* Переключатель цветов флага (owner 9576): 4 кликабельных цвета под флагом, активный подсвечен. */
.xs-flag-swatches{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;gap:6px;width:120px}
.xs-flag-sw{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 3px 2px;border-radius:9px;background:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 8%,var(--xh-bg-card));border:1px solid color-mix(in srgb,var(--_fc,var(--xh-border)) 22%,var(--xh-border));cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.xs-flag-sw:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 60%,transparent)}
.xs-flag-sw:focus-visible{outline:2px solid color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 70%,transparent);outline-offset:2px}
.xs-flag-sw img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.xs-flag-sw-lv{font-size:10px;font-weight:700;line-height:1;color:var(--xh-text-soft)}
.xs-flag-sw.is-active{background:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 22%,var(--xh-bg-card));border-color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 80%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 42%,transparent)}
.xs-flag-sw.is-active .xs-flag-sw-lv{color:color-mix(in srgb,var(--_fc,var(--xh-blue-light)) 82%,var(--xh-white))}
@media(max-width:480px){.xs-flag,.xs-flag-card{width:92px}.xs-flag{height:92px}.xs-flag-swatches{width:92px;gap:4px}.xs-flag-sw img{width:26px;height:26px}}

/* #9383 (owner): кинематографичная шапка навыка альянса. Своего фона-сцены у навыков нет — атмосферу
   делаем из ЭМБЛЕМЫ навыка (сильно размытая, справа) + крупная чёткая картинка справа. Слева — текст. */
.xs-shero{position:relative;overflow:hidden;border-bottom:1px solid var(--xh-border);background:var(--xh-bg-deep)}
.xs-shero-bg{position:absolute;inset:0;z-index:0;background:var(--_bg) right center/auto 160% no-repeat;filter:blur(42px) saturate(1.25);opacity:.5;transform:scale(1.12)}
.xs-shero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--xh-bg-deep) 8%,rgba(8,12,22,.8) 42%,rgba(8,12,22,.28) 74%,transparent 100%),linear-gradient(0deg,var(--xh-bg-deep) 3%,transparent 52%)}
.xs-shero-inner{position:relative;z-index:2;max-width:var(--xh-max-w,1200px);margin:0 auto;width:100%;padding:0 32px 30px}
.xs-shero-grid{display:flex;gap:28px;align-items:center;margin-top:22px}
.xs-shero-copy{flex:1 1 auto;min-width:0}
.xs-shero-art{flex:0 0 auto;width:196px;height:196px;display:flex;align-items:center;justify-content:center}
.xs-shero-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 36px rgba(0,0,0,.6))}
.xs-shero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.xs-shero-title{font-family:var(--xh-font-heading);font-size:clamp(30px,5vw,46px);font-weight:800;color:var(--xh-white);margin:0 0 12px;line-height:1.05;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.xs-shero-lead{max-width:60ch;color:var(--xh-text-secondary);font-size:15.5px;line-height:1.6;margin:0 0 16px}
.xs-shero-facts{display:flex;flex-wrap:wrap;gap:10px}
.xs-shero-fact{background:rgba(8,12,22,.5);border:1px solid var(--xh-border);border-radius:var(--xh-radius-md);padding:9px 15px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.xs-shero-fact .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--xh-text-soft);font-weight:600;margin-bottom:2px}
.xs-shero-fact .v{display:block;font-size:15px;font-weight:700;color:var(--xh-blue-light)}
@media(max-width:760px){
  .xs-shero-grid{flex-direction:column-reverse;align-items:flex-start;gap:14px;margin-top:14px}
  .xs-shero-art{width:128px;height:128px;align-self:center}
  .xs-shero-inner{padding:0 18px 22px}
  .xs-shero-bg{background-size:auto 120%;opacity:.42}
}

/* Кинематографичная шапка фракции (owner 9280) — фон+персонаж+эмблема из игры */
.xs-fhero{position:relative;overflow:hidden;min-height:380px;display:flex;border-bottom:1px solid var(--xh-border);background:var(--xh-bg-deep)}
/* owner 2026-07-09: фон фракции = ШИРОКАЯ сцена bg-{id}.webp на всю ширину (тёмный левый край → планета/станция справа, без логотипа).
   char-портрет отключён (давал «два слоя» + сильный зум). Масштаб небольшой: картинка ландшафтная, cover почти не кропит. */
.xs-fhero-bg{position:absolute;inset:0;z-index:0;background:var(--_bg) right center/80% auto no-repeat;opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 99%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 99%)}
.xs-fhero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--xh-bg-deep) 4%,rgba(8,12,22,.86) 34%,rgba(8,12,22,.4) 64%,transparent 94%),linear-gradient(0deg,var(--xh-bg-deep) 6%,rgba(8,12,22,.35) 40%,transparent 66%)}
.xs-fhero-char{display:none}
/* owner 2026-07-09: cover заполняет, но узкий бокс = меньше приближения, чем было (широкий бокс сильно кропил портрет). */
.xs-fhero-char img{width:100%;height:100%;object-fit:cover;object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%),linear-gradient(180deg,#000 40%,transparent 96%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 46%),linear-gradient(180deg,#000 40%,transparent 96%);mask-composite:intersect}
.xs-fhero-inner{position:relative;z-index:2;max-width:var(--xh-max-w,1200px);margin:0 auto;width:100%;padding:0 32px 32px;display:flex;flex-direction:column;justify-content:flex-end}
.xs-fhero-main{display:flex;gap:18px;align-items:flex-end;margin-top:24px}
.xs-fhero-emblem{flex:0 0 auto;width:82px;height:82px;border-radius:20px;padding:9px;background:rgba(8,12,22,.55);border:1px solid color-mix(in srgb,var(--xh-blue-light) 42%,transparent);box-shadow:0 10px 30px -10px rgba(0,0,0,.7),inset 0 0 24px color-mix(in srgb,var(--xh-blue) 18%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.xs-fhero-emblem img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.xs-fhero-copy{min-width:0}
.xs-fhero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.xs-fhero-title{font-family:var(--xh-font-heading);font-size:clamp(30px,6vw,48px);font-weight:800;color:var(--xh-white);margin:0 0 10px;line-height:1.03;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.xs-fhero-summary{max-width:58ch;color:var(--xh-text-secondary);font-size:15.5px;line-height:1.6;margin:0 0 16px}
.xs-fhero-facts{display:flex;flex-wrap:wrap;gap:10px}
.xs-fhero-fact{background:rgba(8,12,22,.5);border:1px solid var(--xh-border);border-radius:var(--xh-radius-md);padding:9px 15px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.xs-fhero-fact .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--xh-text-soft);font-weight:600;margin-bottom:2px}
.xs-fhero-fact .v{display:block;font-size:15px;font-weight:700;color:var(--xh-blue-light)}
@media(max-width:760px){
  .xs-fhero{min-height:360px}
  /* owner 2026-07-11 (9520): на телефоне фон был узкой строкой справа («недомощён»). Теперь картинка
     заполняет всю ширину шапки (cover, показываем правую — сюжетную — часть), а читаемость текста держит
     усиленная нижняя затемняющая шторка. Маска снизу мягко уводит фон в тёмный, где лежит текст. */
  .xs-fhero-bg{background-position:center right;background-size:cover;opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 97%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 97%)}
  .xs-fhero-scrim{background:linear-gradient(180deg,rgba(8,12,22,.30) 0%,rgba(8,12,22,.58) 44%,rgba(8,12,22,.93) 100%)}
  .xs-fhero-inner{padding:0 18px 22px}
  .xs-fhero-main{flex-direction:column;align-items:flex-start;gap:12px;margin-top:96px}
  .xs-fhero-emblem{width:64px;height:64px}
  .xs-fhero-summary{font-size:14px}
}

/* Лор фракции — вводная проза (SEO) */
.xs-fr-lore{font-size:15.5px;line-height:1.7;color:var(--xh-text-secondary);max-width:74ch}
.xs-ally .xs-fr-lore b{color:var(--xh-blue-light)}

/* Калькулятор уровня фракции + график цен (owner 9282) */
.xs-fcalc{border:1px solid var(--xh-border);border-radius:var(--xh-radius-lg);background:var(--xh-bg-card);padding:20px}
.xs-fcalc-top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.xs-fcalc-ctl{flex:1 1 300px;min-width:0}
.xs-fcalc-lvl-lbl{display:block;font-size:14px;color:var(--xh-text-secondary);margin-bottom:8px}
.xs-fcalc-lvl-lbl b{color:var(--xh-blue-light);font-size:16px}
.xs-fcalc-range{width:100%;accent-color:var(--xh-blue-light);cursor:pointer}
.xs-fcalc-cost{text-align:right}
.xs-fcalc-cost-k{font-size:12px;color:var(--xh-text-soft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.xs-fcalc-cost-v{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:var(--xh-white);font-variant-numeric:tabular-nums}
.xs-fcalc-cost-v img{width:22px;height:22px}
.xs-fcalc-bonuses{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 18px}
.xs-fcalc-grp{grid-column:1/-1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--xh-text-soft);margin-top:10px;margin-bottom:2px}
.xs-fcalc-b{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--xh-border)}
.xs-fcalc-b span{font-size:13px;color:var(--xh-text-secondary)}
.xs-fcalc-b b{font-size:14px;color:var(--xh-blue-light);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.xs-fcalc-graph{margin-top:18px}
.xs-fcalc-graph-h{font-size:13px;color:var(--xh-text-soft);margin-bottom:8px}
.xs-fcalc-svg{width:100%;height:150px;display:block}
.xs-fcalc-graph-x{display:flex;justify-content:space-between;font-size:11px;color:var(--xh-text-soft);margin-top:4px}
@media(max-width:600px){.xs-fcalc-bonuses{grid-template-columns:1fr}.xs-fcalc-cost{text-align:left}}
/* Ссылки на бонусах фракции (owner 9282) */
.xs-ally .xs-req-link{color:var(--xh-blue-light);text-decoration:none}
.xs-ally .xs-req-link:hover{text-decoration:underline}

/* Цена прокачки навыка — ресурсные чипы (owner 9283) */
.xs-skcalc-res{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.xs-skcalc-r{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--xh-text-secondary);background:var(--xh-overlay-1);border:1px solid var(--xh-border);border-radius:8px;padding:5px 11px 5px 6px;font-variant-numeric:tabular-nums}
.xs-skcalc-r img{width:20px;height:20px;object-fit:contain}
.xs-skcalc .xs-fcalc-cost-v{font-size:19px}