/* Реалистичные кадры вместо значков в блоках преимуществ (24.10.2026, владелец: «иконки тоже нужно сгенерировать»,
   аудитория — мужчины 30+). Главная (_partials/advantages.php) и /mobile. Кадры — GPT, media/v2/img/home-adv/, mobile/adv-*. */
.xh-adv-photo { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; margin: 0 auto 16px; border-radius: var(--xh-radius-lg, 14px); overflow: hidden; border: 1px solid var(--xh-border); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.xh-adv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.xh-advantage:hover .xh-adv-photo img, .xm-adv:hover .xh-adv-photo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .xh-adv-photo img { transition: none; } .xh-advantage:hover .xh-adv-photo img, .xm-adv:hover .xh-adv-photo img { transform: none; } }
/* /mobile: телефон (альбомный, как игра) с экраном загрузки Android-приложения: фон, логотип, полоса загрузки. */
.xm-hero-device { width: min(500px, 100%); margin: 0 auto; padding: 10px 14px; border-radius: 30px; background: linear-gradient(145deg, #1b2230, #0a0e16); border: 1px solid #2a3a55; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .04); transform: rotate(-3deg); }
.xm-hero-device__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.xm-hero-device__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xm-hero-device__load { position: absolute; left: 50%; bottom: 7%; width: 46%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.xm-hero-device__load img { width: 100%; height: auto; display: block; }
.xm-hero-device__bar { width: 86%; height: 7px; border-radius: 6px; border: 1px solid rgba(160, 160, 160, .6); background: rgba(0, 0, 0, .15); overflow: hidden; }
.xm-hero-device__bar i { display: block; height: 100%; width: 70%; border-radius: 5px; background: #fff; animation: xm-app-load 7.5s ease-in-out infinite; }
/* Загрузка ~2,5 с до 100%, затем 5 с стоит заполненной и только потом заново (владелец 25.10). */
@keyframes xm-app-load { 0% { width: 6%; } 33.3%, 100% { width: 100%; } }
@media (max-width: 768px) { .xm-hero-device { transform: none; padding: 8px 10px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .xm-hero-device__bar i { animation: none; } }
a.xm-screen-thumb { display: block; }
/* Главная, блок базы знаний (_partials/knowledge-strip.php): картинка раздела сверху карточки во всю ширину. */
.xh-kb-strip-section:has(.xh-kbimg) { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.xh-kb-strip-section__icon:has(.xh-kbimg) { width: 100%; height: 140px; border-radius: 0; background: none; }
.xh-kb-strip-section__icon .xh-kbimg { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; transition: transform .5s ease; }
.xh-kb-strip-section:hover .xh-kbimg { transform: scale(1.04); }
.xh-kb-strip-section:has(.xh-kbimg) .xh-kb-strip-section__body { padding: 18px 22px 20px; }
@media (prefers-reduced-motion: reduce) { .xh-kb-strip-section__icon .xh-kbimg { transition: none; } .xh-kb-strip-section:hover .xh-kbimg { transform: none; } }
/* Главная, счётчики: свои значки с цветом смысла (владелец 25.10: «небольшие лаконичные иконки»):
   онлайн — эфир с живой точкой, альянсы — щит с тремя связанными, войны — скрещённые клинки, бои — прицел. */
.xh-stat-icon--online { color: var(--xh-green); border-color: color-mix(in srgb, var(--xh-green) 40%, transparent); background: color-mix(in srgb, var(--xh-green) 10%, transparent); }
.xh-stat-icon--alliances { color: var(--xh-blue-light); border-color: color-mix(in srgb, var(--xh-blue-light) 40%, transparent); background: color-mix(in srgb, var(--xh-blue-light) 10%, transparent); }
.xh-stat-icon--wars { color: var(--xh-orange); border-color: color-mix(in srgb, var(--xh-orange) 40%, transparent); background: color-mix(in srgb, var(--xh-orange) 10%, transparent); }
.xh-stat-icon--battles { color: var(--xh-amber); border-color: color-mix(in srgb, var(--xh-amber) 40%, transparent); background: color-mix(in srgb, var(--xh-amber) 10%, transparent); }
.xh-stat-pulse { transform-origin: 12px 12px; animation: xh-stat-pulse 2.4s ease-in-out infinite; }
@keyframes xh-stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .xh-stat-pulse { animation: none; } }