/* =========================================================
   single-games.css — стили карточки игры (single-games.php).

   Подключается из header.php только на is_singular('games').

   ВАЖНО: все селекторы префиксованы через body.single-games,
   при необходимости — поднимаем специфичность через #main / .single-game,
   чтобы пробить admin-theme.css и legacy footer.css/main.css.

   Зависимости: переменные --igp-* из css/home/home.css.
   Только flexbox, никакого grid.
   ========================================================= */

/* ---------- Контейнер ---------- */
body.single-games .single-game {
    background: var(--igp-bg);
}


/* ---------- Шапка-плашка (.lozung.game-title-fix) ----------
   Раньше: 80+ px высоты, h1 unset, фон через footer.css `#fff !important`.
   Цель: компактная плашка как в архиве — заголовок слева, действия справа.
   Префикс body.single-games обязателен — нужно перекрыть .single-game .lozung
   из footer.css:162 и .game-title-fix из footer.css:2970.
*/
body.single-games .single-game .lozung.game-title-fix {
    position: relative;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px 16px;
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    color: var(--igp-text) !important;
    border: 1px solid var(--igp-border);
    border-radius: 14px;
    padding: 14px 56px;
    margin: 0px 0 22px;
    box-shadow: none;
    text-align: center;
    text-transform: none;
    min-height: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.single-games .single-game .lozung.game-title-fix h1 {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    color: var(--igp-text);
}
body.single-games .single-game .lozung.game-title-fix h1 strong {
    font-family: inherit;
    font-weight: 700;
    font-size: inherit;
    color: inherit;
    text-transform: none;
}

/* Стрелка "назад" к фестивалю — абсолютно слева, чтобы не сдвигала
   центрированный заголовок. */
body.single-games .single-game .lozung.game-title-fix .back-to-games {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--igp-surface-alt);
    color: var(--igp-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
body.single-games .single-game .lozung.game-title-fix .back-to-games::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6z'/></svg>") center/contain no-repeat;
}
body.single-games .single-game .lozung.game-title-fix .back-to-games:hover {
    background: var(--igp-accent);
    color: var(--igp-on-accent);
}

/* Кнопки "В список / В списке" — pill в фирменном стиле, абсолютно справа. */
body.single-games .single-game .lozung.game-title-fix .rbtn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    appearance: none;
    border: none;
    cursor: pointer;
    background: var(--igp-accent);
    color: var(--igp-on-accent);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 999px;
    transition: background 0.15s ease, transform 0.15s ease;
}
body.single-games .single-game .lozung.game-title-fix .rbtn:hover {
    background: var(--igp-accent-hover);
    transform: translateY(calc(-50% - 1px));
}
body.single-games .single-game .lozung.game-title-fix .rbtn.outwish {
    background: var(--igp-surface-alt);
    color: var(--igp-text);
}
body.single-games .single-game .lozung.game-title-fix .rbtn.outwish:hover {
    background: var(--igp-border);
}

/* ---------- Галерея скриншотов ---------- */
body.single-games .single-game .single-game-gallery {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 0 24px;
    padding: 0;
    box-shadow: none;
}

body.single-games .single-game .gameslider-main {
    position: relative;
    background: var(--igp-surface);
    border: 1px solid var(--igp-border);
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 12px;
}
/* slick-list — обёртка вьюпорта, slick-track — лента слайдов.
   На главном слайдере без gap'а между слайдами: один slide занимает 100%. */
body.single-games .single-game .gameslider-main .slick-list,
body.single-games .single-game .gameslider-main .slick-track {
    line-height: 0;
}
body.single-games .single-game .gameslider-main .slick-list {
    overflow: hidden;
    width: 100%;
}
body.single-games .single-game .gameslider-main .slick-track {
    display: flex !important;
    /* было stretch — на iOS Safari stretch у slick-slide (height:auto) + aspect-ratio
       у потомка схлопывает высоту слайда почти в ноль (картинка ~20px). flex-start
       снимает stretch-петлю: высоту задаёт сам .gameslider-main-img от своей ширины. */
    align-items: flex-start;
}
body.single-games .single-game .gameslider-main .slick-slide {
    height: auto;
    float: none;
    padding: 0;
    margin: 0;
}
body.single-games .single-game .gameslider-main .gameslider-main-img {
    position: relative;
    display: block !important;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    line-height: 0;
}
/* Fallback для старых WebKit без поддержки aspect-ratio: высоту даёт padding-top
   трюк (9/16). На движках с aspect-ratio эта ветка не активируется. */
@supports not (aspect-ratio: 1) {
    body.single-games .single-game .gameslider-main .gameslider-main-img {
        height: 0;
        padding-top: 56.25%;
    }
}
body.single-games .single-game .gameslider-main .gameslider-main-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Стрелки slick — рисуем SVG через background-image (data: URL), чтобы
   не зависеть от внешних imgs/arrow-left.svg (которых нет в репо) и от
   шрифта slick. !important нужен, чтобы пробить admin-theme.css. */
body.single-games #main .gameslider-main .slick-prev,
body.single-games #main .gameslider-main .slick-next,
body.single-games .single-game .gameslider-main .slick-prev,
body.single-games .single-game .gameslider-main .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 5 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease !important;
    -webkit-mask: none !important;
            mask: none !important;
}
body.single-games #main .gameslider-main .slick-prev,
body.single-games .single-game .gameslider-main .slick-prev { left: 12px !important; }
body.single-games #main .gameslider-main .slick-next,
body.single-games .single-game .gameslider-main .slick-next { right: 12px !important; }
body.single-games #main .gameslider-main .slick-prev:hover,
body.single-games #main .gameslider-main .slick-next:hover,
body.single-games .single-game .gameslider-main .slick-prev:hover,
body.single-games .single-game .gameslider-main .slick-next:hover {
    background: var(--igp-accent) !important;
    background-color: var(--igp-accent) !important;
    transform: translateY(-50%) scale(1.05) !important;
}
body.single-games #main .gameslider-main .slick-prev::before,
body.single-games #main .gameslider-main .slick-next::before,
body.single-games .single-game .gameslider-main .slick-prev::before,
body.single-games .single-game .gameslider-main .slick-next::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translate(-50%, -50%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    -webkit-mask: none !important;
            mask: none !important;
    font-family: inherit !important;
    font-size: 0 !important;
    opacity: 1 !important;
    color: transparent !important;
}
body.single-games #main .gameslider-main .slick-prev::before,
body.single-games .single-game .gameslider-main .slick-prev::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6z'/></svg>") !important;
}
body.single-games #main .gameslider-main .slick-next::before,
body.single-games .single-game .gameslider-main .slick-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M8.5 5l7 7-7 7-1.4-1.4L12.7 12 7.1 6.4z'/></svg>") !important;
}

/* Миниатюры (nav). */
body.single-games .single-game .gameslider-nav {
    margin: 0 -4px;
}
body.single-games .single-game .gameslider-nav .slick-track {
    display: flex;
    align-items: stretch;
}
body.single-games .single-game .gameslider-nav .gameslider-nav-img {
    padding: 0 4px;
    cursor: pointer;
    line-height: 0;
}

/* Статичный режим (когда миниатюр <= 5) — просто flex-ряд, без slick'a. */
body.single-games .single-game .gameslider-nav.is-static {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 -4px;
    visibility: visible;
    overflow: hidden;
    height: auto;
}
body.single-games .single-game .gameslider-nav.is-static .gameslider-nav-img {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    display: block !important;
}
body.single-games .single-game .gameslider-nav.is-static .gameslider-nav-img img {
    transition: opacity 0.15s ease;
    opacity: 0.5;
}
body.single-games .single-game .gameslider-nav.is-static .gameslider-nav-img.is-current img {
    opacity: 1;
}
body.single-games .single-game .gameslider-nav.is-static .gameslider-nav-img:hover img {
    opacity: 1;
}
body.single-games .single-game .gameslider-nav .gameslider-nav-img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.15s ease;
    opacity: 0.5;
}
body.single-games .single-game .gameslider-nav .slick-current .gameslider-nav-img img,
body.single-games .single-game .gameslider-nav .slick-active .gameslider-nav-img img {
    opacity: 1;
}
body.single-games .single-game .gameslider-nav .gameslider-nav-img:hover img {
    opacity: 1;
}

/* До инициализации slick: на главном слайдере показываем только первый
   кадр (остальные скрываем, чтобы не было колонки лишних картинок).
   Миниатюрный навигатор скрываем полностью, но резервируем высоту,
   чтобы layout под ним не прыгал при инициализации.

   Класс .is-static выставляется JS-ом когда миниатюр <=5 и slick для них
   НЕ инициализируется — для этих случаев правила прелоада не нужны. */
body.single-games .single-game .gameslider-main:not(.slick-initialized) .gameslider-main-img:not(:first-child) {
    display: none !important;
}
body.single-games .single-game .gameslider-nav:not(.slick-initialized):not(.is-static) {
    visibility: hidden;
    overflow: hidden;
    /* Зарезервированная высота примерно равна высоте slick-инициализированной
       полосы миниатюр (16:9 при ширине ~(контейнер−24)/5 + 4px padding) */
    height: clamp(60px, 11vw, 130px);
    margin: 0 -4px;
}
body.single-games .single-game .gameslider-nav:not(.slick-initialized):not(.is-static) .gameslider-nav-img {
    display: none !important;
}

/* ---------- Секции gray-section (метаданные / разработчик) ---------- */
body.single-games #main .gray-section,
body.single-games .single-game .gray-section {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    border: 1px solid var(--igp-border);
    border-radius: 14px;
    padding: 8px 24px;
    margin: 0 0 18px;
    box-shadow: none;
}

body.single-games .single-game .gray-section-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    min-height: 56px;
    border-bottom: 1px solid var(--igp-border);
}
body.single-games .single-game .gray-section-row:last-child {
    border-bottom: none;
}
/* Если в right-field многострочный текст — выравниваем по верху, чтобы
   длинное описание не центрировалось вокруг короткого label. */
body.single-games .single-game .gray-section-row:has(.right-field p),
body.single-games .single-game .gray-section-row:has(.right-field br) {
    align-items: flex-start;
}
body.single-games .single-game .gray-section .left-title,
body.single-games #main .gray-section .left-title {
    flex: 0 0 220px;
    max-width: 220px;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--igp-text-muted);
    line-height: 1.45;
}
body.single-games .single-game .gray-section .right-field,
body.single-games #main .gray-section .right-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--igp-text);
    line-height: 1.5;
    word-wrap: break-word;
}
body.single-games .single-game .gray-section .right-field p {
    margin: 0 0 8px;
}
body.single-games .single-game .gray-section .right-field p:last-child {
    margin: 0;
}
body.single-games .single-game .gray-section .right-field a {
    color: var(--igp-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--igp-accent) 35%, transparent);
    transition: color 0.15s ease, border-color 0.15s ease;
}
body.single-games .single-game .gray-section .right-field a:hover {
    color: var(--igp-accent-hover);
    border-bottom-color: var(--igp-accent-hover);
}

/* ---------- Пилюли-кнопки трейлера / геймплея / переходов ----------
   Идентичны кнопкам на архивной странице games-archive.css — pill с
   SVG-иконкой через background-image (data: URL). */
body.single-games #main .gray-section .flex-row,
body.single-games .single-game .gray-section .flex-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
body.single-games #main .gray-section .trailer-btn,
body.single-games #main .gray-section .gameplay-btn,
body.single-games .single-game .gray-section .trailer-btn,
body.single-games .single-game .gray-section .gameplay-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: auto !important;
    width: auto !important;
    padding: 9px 16px 9px 13px !important;
    background: var(--igp-accent) !important;
    background-color: var(--igp-accent) !important;
    background-image: none !important;
    color: var(--igp-on-accent) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .18s ease, transform .15s ease, filter .15s ease !important;
    box-shadow: 0 2px 6px var(--igp-shadow-color) !important;
}
body.single-games #main .gray-section .trailer-btn:hover,
body.single-games #main .gray-section .gameplay-btn:hover,
body.single-games .single-game .gray-section .trailer-btn:hover,
body.single-games .single-game .gray-section .gameplay-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    color: var(--igp-on-accent) !important;
    text-decoration: none !important;
}
body.single-games #main .gray-section .trailer-btn::before,
body.single-games #main .gray-section .gameplay-btn::before,
body.single-games .single-game .gray-section .trailer-btn::before,
body.single-games .single-game .gray-section .gameplay-btn::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex: 0 0 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}
/* Trailer — play-в-круге (как у YouTube/Vimeo), хорошо читается на 14px. */
body.single-games #main .gray-section .trailer-btn::before,
body.single-games .single-game .gray-section .trailer-btn::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path fill='%23ffffff' stroke='none' d='M10 8.5v7l6-3.5z'/></svg>") !important;
}
/* Gameplay — game controller (геймпад) с чёткими «крестом» и кнопками. */
body.single-games #main .gray-section .gameplay-btn::before,
body.single-games .single-game .gray-section .gameplay-btn::before {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12h4M8 10v4'/><circle cx='15' cy='13' r='1' fill='%23ffffff'/><circle cx='17.5' cy='11' r='1' fill='%23ffffff'/><path d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59l-.92 9A2 2 0 0 0 3.766 20a2 2 0 0 0 1.71-.962L7.83 15.5h8.34l2.354 3.538A2 2 0 0 0 20.234 20a2 2 0 0 0 1.984-2.41l-.92-9A4 4 0 0 0 17.32 5z'/></svg>") !important;
}

/* Ссылка-разработчик внутри ячейки. */
body.single-games .single-game .gray-section .right-field a.devlink {
    /* devlink в "Разработчик" — это просто ссылка, не пилюля. */
    background: transparent !important;
    color: var(--igp-accent) !important;
    padding: 0 !important;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--igp-accent) 35%, transparent);
    font-weight: 500;
}
body.single-games .single-game .gray-section .right-field a.devlink:hover {
    background: transparent !important;
    transform: none;
    color: var(--igp-accent-hover) !important;
}

/* ---------- Steam-ключ ---------- */
body.single-games .single-game .gray-section .steam-key-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body.single-games .single-game .gray-section .steam-key,
body.single-games .single-game .gray-section .steam-key-placeholder,
body.single-games .single-game .gray-section .steam-key-stars {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--igp-text);
    background: var(--igp-surface-alt);
    padding: 6px 12px;
    border-radius: 8px;
}
body.single-games .single-game .gray-section .copy-key {
    appearance: none;
    border: none;
    background: var(--igp-surface-alt);
    color: var(--igp-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
body.single-games .single-game .gray-section .copy-key:hover {
    background: var(--igp-border);
}

/* ---------- Vote panel ---------- */
body.single-games .single-game .about-game.vote-panel {
    padding: 18px 24px;
}

/* ---------- Game notice ---------- */
body.single-games .single-game .game-notice {
    background: color-mix(in srgb, var(--igp-accent) 12%, var(--igp-surface));
    border: 1px solid color-mix(in srgb, var(--igp-accent) 40%, transparent);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 18px;
    color: var(--igp-text);
}
body.single-games .single-game .game-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 720px) {
    body.single-games .single-game .lozung.game-title-fix {
        padding: 12px 48px;
        gap: 8px 12px;
        margin: 14px 0 18px;
    }
    body.single-games .single-game .lozung.game-title-fix h1 {
        font-size: 18px;
    }
    body.single-games .single-game .lozung.game-title-fix .back-to-games {
        width: 32px;
        height: 32px;
        left: 8px;
    }
    body.single-games .single-game .lozung.game-title-fix .rbtn {
        right: 8px;
        font-size: 12px;
        padding: 8px 12px;
    }
    body.single-games .single-game .gray-section {
        padding: 4px 16px;
    }
    body.single-games .single-game .gray-section-row,
    body.single-games .single-game .gray-section-row:has(.right-field p),
    body.single-games .single-game .gray-section-row:has(.right-field br) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px;
        padding: 12px 0;
        min-height: 0;
    }
    body.single-games .single-game .gray-section .left-title,
    body.single-games #main .gray-section .left-title {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        font-size: 12px;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body.single-games .single-game .gray-section .right-field,
    body.single-games #main .gray-section .right-field {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        text-align: left;
    }
    body.single-games .single-game .gameslider-main .slick-prev,
    body.single-games .single-game .gameslider-main .slick-next {
        width: 34px;
        height: 34px;
    }
    body.single-games .single-game .gameslider-main .slick-prev { left: 8px; }
    body.single-games .single-game .gameslider-main .slick-next { right: 8px; }
}

/* =========================================================
   Тёмная тема — admin-theme.css имеет правила
   `html body.admin-theme-dark div[class]:not(...)*` с очень
   высокой специфичностью. Дублируем под этим селектором.
   ========================================================= */
body.single-games.admin-theme-dark #main .lozung.game-title-fix,
body.single-games.admin-theme-dark .single-game .lozung.game-title-fix {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    color: var(--igp-text) !important;
    border-color: var(--igp-border);
    box-shadow: none;
}
body.single-games.admin-theme-dark #main .lozung.game-title-fix h1,
body.single-games.admin-theme-dark #main .lozung.game-title-fix h1 strong {
    color: var(--igp-text) !important;
}
body.single-games.admin-theme-dark #main .lozung.game-title-fix .back-to-games {
    background: var(--igp-surface-alt);
    color: var(--igp-text);
}
body.single-games.admin-theme-dark #main .gray-section,
body.single-games.admin-theme-dark .single-game .gray-section {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    border-color: var(--igp-border);
}
body.single-games.admin-theme-dark #main .gray-section-row {
    border-bottom-color: var(--igp-border);
}
body.single-games.admin-theme-dark #main .gameslider-main {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    border-color: var(--igp-border);
}
body.single-games.admin-theme-dark #main .single-game-gallery {
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================================
   БЛОК КОММЕНТАРИЕВ — редизайн под дизайн-систему --igp-*
   (inc/parts/comments.php). Заменяет старые стили из
   festival/css/main.css:212-437 и style.css:1728-1815.

   Все селекторы префиксованы body.single-games (#main при
   необходимости пробить admin-theme.css). Только flexbox.
   Цвета — токены --igp-* (home.css), плюс локальные роли/поля.
   ========================================================= */
body.single-games {
    /* Поля ввода и мягкий акцентный фон — не входят в общий набор --igp-* */
    --igpc-field:       #ffffff;
    --igpc-accent-soft: #fdecec;
    /* Бейджи ролей — мягкий tint в бренд-палитре (светлая тема) */
    --igpc-exp-bg:  #fdecec;  --igpc-exp-fg:  #c0202a;
    --igpc-str-bg:  #efeafb;  --igpc-str-fg:  #6b46c1;
    --igpc-auth-bg: #eaf6ee;  --igpc-auth-fg: #2f8a4e;
}
body.single-games.admin-theme-dark {
    --igpc-field:       #1a1a1a;
    --igpc-accent-soft: #3a2122;
    --igpc-exp-bg:  #3a2122;  --igpc-exp-fg:  #ff7b80;
    --igpc-str-bg:  #2c2541;  --igpc-str-fg:  #b59cf2;
    --igpc-auth-bg: #22321f;  --igpc-auth-fg: #7fcf93;
}

/* ---------- Шапка-плашка «Комментарии» (компактная, красная Molot) ----------
   Базовый .lozung (css/main.css:473) даёт высоту: padding 20px +
   line-height 34px + браузерный margin <h2>. Поджимаем точечно. */
body.single-games .lozung.lozung--comments {
    padding: 14px 20px;
    border-radius: 10px;
    margin: 28px 0 18px;
}
body.single-games .lozung.lozung--comments h2 {
    margin: 0;
    padding: 0;
    line-height: 1.1;
}
body.single-games .lozung.lozung--comments h2 strong {
    font-size: 26px;
    line-height: 1.1;
}

/* ---------- Форма нового комментария ---------- */
body.single-games .comment-game .comment-form {
    background: transparent;
    position: static;
}
body.single-games .comment-game .comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 96px;
    resize: none;
    padding: 12px 14px;
    background: var(--igpc-field);
    color: var(--igp-text);
    border: 1px solid var(--igp-border);
    border-radius: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .18s ease;
}
body.single-games .comment-game .comment-form textarea:focus {
    border-color: var(--igp-accent);
}
body.single-games .comment-game .comment-form textarea::placeholder {
    color: var(--igp-text-muted);
}
/* Форма: textarea сверху, кнопка под ним справа.
   Кнопку выравниваем вправо через `display:block; margin-left:auto` —
   это НЕ зависит от display родителя (jQuery .show() ставит inline display
   и сломал бы flex), и НЕ использует float (хрупко конфликтует со старым
   `.comment-form .btn {position:absolute}` из css/main.css и footer.css).
   Сбрасываем position/float/offsets, унаследованные от старых правил. */
body.single-games .comment-game .comment-form #submit-comment {
    position: relative !important;
    float: none !important;
    bottom: auto !important;
    right: auto !important;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 12px;
    margin-left: auto;
}

/* ---------- Лента комментариев ---------- */
body.single-games .game-comments {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 56px;   /* #2: отступ до футера (раньше блок впритык) */
}
body.single-games .game-comments .comment-main {
    display: block;
}

/* ---------- Карточка: две колонки, без hover ---------- */
body.single-games .game-comments .game-comment {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-bottom: 0;
    background: var(--igp-surface);
    border: 1px solid var(--igp-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Колонка автора */
/* #4: колонка автора заметно уже (фикс. ширина вместо 30%), аватар крупнее.
   Без фона — вместо плашки деликатный укороченный правый бордер через ::after
   (не на всю высоту, по центру). */
body.single-games .game-comments .game-comment .autor {
    position: relative;
    flex: 0 0 160px;
    max-width: 160px;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 8px;
    padding: 18px 12px;
    background: transparent;
}
/* Укороченный вертикальный разделитель справа (через ::after) */
body.single-games .game-comments .game-comment .autor::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 64%;
    background: var(--igp-border);
}
body.single-games .game-comments .game-comment .autor .ava {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
}
/* Роль-плашка (мягкий pill). Пустой span (обычный юзер) скрываем. */
body.single-games .game-comments .game-comment .autor span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    opacity: 1;
    display: inline-block;
    margin: 0;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--igp-text-muted);
    background: transparent;
}
body.single-games .game-comments .game-comment .autor span:empty {
    display: none;
}
body.single-games .game-comments .game-comment .autor .role-expert {
    background: var(--igpc-exp-bg);
    color: var(--igpc-exp-fg);
}
body.single-games .game-comments .game-comment .autor .role-streamer {
    background: var(--igpc-str-bg);
    color: var(--igpc-str-fg);
}
body.single-games .game-comments .game-comment .autor .comment-author-badge {
    background: var(--igpc-auth-bg);
    color: var(--igpc-auth-fg);
    font-size: 11px;
    margin: 0;
}
/* Имя автора */
body.single-games .game-comments .game-comment .autor a {
    text-decoration: none;
}
body.single-games .game-comments .game-comment .autor h3.user-name {
    margin: 0;
    padding: 0;
    width: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    color: var(--igp-text);
    transition: color .18s ease;
}
body.single-games .game-comments .game-comment .autor a:hover h3.user-name {
    color: var(--igp-accent);
}

/* Колонка текста — занимает всё оставшееся место после фикс. колонки автора */
body.single-games .game-comments .game-comment .comment-body {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 18px 20px;
    background: var(--igp-surface);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}
body.single-games .game-comments .game-comment .comment-body .comment-content {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--igp-text);
    margin: 0 0 0;
    flex: 1;
}
body.single-games .game-comments .game-comment .comment-body .comment-content p {
    margin-bottom: 8px;
}
body.single-games .game-comments .game-comment .comment-body .comment-content p:last-child {
    margin-bottom: 0;
}
/* Мета-строка: дата + «Ответить» */
body.single-games .game-comments .game-comment .comment-body .comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--igp-border);
}
body.single-games .game-comments .game-comment .comment-body .comment-meta .comment-data {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: var(--igp-text-muted);
}

/* ---------- Кнопка «Ответить» (единственный hover в блоке) ---------- */
body.single-games .reply-comment {
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--igp-accent);
    background: var(--igpc-accent-soft);
    box-shadow: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}
body.single-games .reply-comment::before {
    content: '↩';
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    margin: 0;
    font-size: 13px;
    line-height: 1;
}
body.single-games .reply-comment:hover {
    background: var(--igp-accent);
    color: var(--igp-on-accent);
    box-shadow: none;
}

/* ---------- Ветка ответов ---------- */
body.single-games .comment-replys {
    padding-left: 160px;   /* под фикс. ширину колонки автора (#4) */
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
body.single-games .comment-replys .game-comment .autor .ava {
    width: 56px;
    height: 56px;
}

/* ---------- Окно ответа (.reply-form) и редактирования (.comment-edit-popup) ---------- */
body.single-games .reply-form {
    display: none;
    position: relative;
    margin: 0;
    margin-left: 160px;   /* под фикс. ширину колонки автора (#4) */
    padding: 16px;
    background: var(--igp-surface-alt);
    border: 1px solid var(--igp-border);
    border-radius: 14px;
    margin-bottom: 20px;
}
body.single-games .comment-replys .reply-form {
    margin-left: 0;
}
body.single-games .reply-form__label,
body.single-games .comment-edit-popup__label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--igp-text-muted);
    margin-bottom: 10px;
}
body.single-games .reply-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 90px;
    resize: none;
    padding: 12px 14px;
    background: var(--igpc-field);
    color: var(--igp-text);
    border: 1px solid var(--igp-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .18s ease;
}
body.single-games .reply-form textarea:focus {
    border-color: var(--igp-accent);
}
body.single-games .reply-form textarea::placeholder {
    color: var(--igp-text-muted);
}
/* Кнопка «Ответить»: position relative (сбрасывает старый absolute из
   main.css/footer.css, оставаясь в потоке), прижата вправо через
   display:block + margin-left:auto. НЕ float. */
body.single-games .reply-form .post-reply {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    float: none !important;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 12px;
    margin-left: auto;
}

/* Popup редактирования — поверх .comment-body.
   top/left/right (без bottom) + min-height вместо height:100% — чтобы на
   коротких комментариях форма не сжималась, а вырастала вниз. */
body.single-games .comment-body .comment-edit-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    background: var(--igp-surface-alt);
    z-index: 10;
    display: none;
    flex-direction: column;
}
body.single-games .comment-body .comment-edit-popup.on {
    display: flex;
}
body.single-games .comment-body .comment-edit-popup .text-com {
    display: block;
    flex-grow: 1;
    min-height: 90px;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 12px 14px;
    background: var(--igpc-field);
    color: var(--igp-text);
    border: 1px solid var(--igp-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .18s ease;
}
body.single-games .comment-body .comment-edit-popup .text-com:focus {
    border-color: var(--igp-accent);
}
body.single-games .comment-body .comment-edit-popup .flex-row {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

/* Иконки редактирования/удаления (style.css задаёт base; правим позицию) */
body.single-games .comment-body .edit-com,
body.single-games .comment-body .delete-com {
    background-color: var(--igp-surface);
}

/* ---------- Адаптив: одна колонка ---------- */
@media (max-width: 640px) {
    body.single-games .game-comments .game-comment {
        flex-direction: column;
    }
    body.single-games .game-comments .game-comment .autor {
        flex: none;
        width: 100%;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        text-align: left;
        gap: 8px 10px;
        padding: 12px 14px;
    }
    /* В строке-сверху вертикальный правый бордер не нужен */
    body.single-games .game-comments .game-comment .autor::after {
        display: none;
    }
    body.single-games .game-comments .game-comment .autor .ava,
    body.single-games .comment-replys .game-comment .autor .ava {
        width: 44px;
        height: 44px;
    }
    body.single-games .game-comments .game-comment .autor h3.user-name {
        width: 100%;
        order: 3;
        text-align: left;
    }
    body.single-games .game-comments .game-comment .comment-body {
        width: 100%;
        padding: 14px;
    }
    /* Ключевой фикс мобилки: ветка без 30%-отступа */
    body.single-games .comment-replys {
        padding-left: 14px;
        margin-left: 4px;
        border-left: 3px solid var(--igp-border);
    }
    body.single-games .reply-form {
        margin-left: 4px;
    }
    body.single-games .lozung.lozung--comments h2 strong {
        font-size: 20px;
    }
}

/* ---------- Тёмная тема: пробить admin-theme.css universal-reset ----------
   admin-theme.css обнуляет background всех div[class] в dark через
   `html body.admin-theme-dark div[class]:not(...)×15 { background: transparent !important }`
   — это (0,0,~17,2) специфичности, классами не перебить. Карточки лежат
   НЕ внутри #main, поэтому #main-селекторы не матчат. РЕШЕНИЕ: якоримся
   на ID #comment-section (контейнер .game-comments) — ID (0,1,0,0) бьёт
   любую гору :not()-классов. Проверено в браузере 2026-05-29. */
html body.admin-theme-dark #comment-section .game-comment {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
    border-color: var(--igp-border) !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor {
    background: transparent !important;
    background-color: transparent !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor::after {
    background: var(--igp-border) !important;
}
html body.admin-theme-dark #comment-section .game-comment .comment-body {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor .role-expert {
    background: var(--igpc-exp-bg) !important;
    color: var(--igpc-exp-fg) !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor .role-streamer {
    background: var(--igpc-str-bg) !important;
    color: var(--igpc-str-fg) !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor .comment-author-badge {
    background: var(--igpc-auth-bg) !important;
    color: var(--igpc-auth-fg) !important;
}
html body.admin-theme-dark #comment-section .reply-comment {
    background: var(--igpc-accent-soft) !important;
    color: var(--igp-accent) !important;
}
html body.admin-theme-dark #comment-section .reply-comment:hover {
    background: var(--igp-accent) !important;
    color: var(--igp-on-accent) !important;
}
html body.admin-theme-dark #comment-section .reply-form,
html body.admin-theme-dark #comment-section .comment-body .comment-edit-popup {
    background: var(--igp-surface-alt) !important;
    background-color: var(--igp-surface-alt) !important;
    border-color: var(--igp-border) !important;
}
html body.admin-theme-dark #comment-section .reply-form textarea,
html body.admin-theme-dark #comment-section .comment-edit-popup .text-com,
html body.admin-theme-dark .comment-game .comment-form textarea,
html body.admin-theme-dark #comment textarea,
html body.admin-theme-dark textarea#comment {
    background: var(--igpc-field) !important;
    background-color: var(--igpc-field) !important;
    border-color: var(--igp-border) !important;
    color: var(--igp-text) !important;
}
/* Иконки edit/delete в dark: тёмный кружок + инверсия тёмного SVG-рисунка
   в светлый (base из style.css — `background:#fff url(...edit.svg)`). */
html body.admin-theme-dark #comment-section .comment-body .edit-com,
html body.admin-theme-dark #comment-section .comment-body .delete-com {
    background-color: var(--igp-surface-alt) !important;
    border: 1px solid var(--igp-border) !important;
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}
/* Текст/дата/имя в dark */
html body.admin-theme-dark #comment-section .game-comment .comment-content {
    color: var(--igp-text) !important;
}
html body.admin-theme-dark #comment-section .game-comment .comment-data {
    color: var(--igp-text-muted) !important;
}
html body.admin-theme-dark #comment-section .game-comment .autor h3.user-name {
    color: var(--igp-text) !important;
}

/* ============================================================
   Ссылки на площадки (store-links) — строка инфо-таблицы игры.
   Иконка магазина + название, нейтральная карточка под --igp-*.
   Выводит ndg_render_store_links() (inc/new-func-2023.php).
   ============================================================ */
body.single-games .single-game .gray-section .store-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.single-games .single-game .gray-section .store-links .store-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--igp-surface);
    border: 1px solid var(--igp-border);
    border-radius: 999px;
    color: var(--igp-text) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.single-games .single-game .gray-section .store-links .store-link:hover {
    transform: translateY(-1px);
    border-color: var(--igp-accent);
    box-shadow: 0 2px 8px var(--igp-shadow-color);
}
body.single-games .single-game .gray-section .store-links .store-link__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}
body.single-games .single-game .gray-section .store-links .store-link__label {
    white-space: nowrap;
}

/* ============================================================
   Бейджи опций игры (game-badges) — плашки рядом с заголовком.
   game-ai → «ИИ 50%+» (нейтральная), adult-game → «16+» (акцент).
   Выводит ndg_render_game_badges() (inc/new-func-2023.php).
   ============================================================ */
body.single-games .single-game .lozung.game-title-fix .game-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
body.single-games .single-game .lozung.game-title-fix .game-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: none;
}
body.single-games .single-game .lozung.game-title-fix .game-badge--ai {
    background: var(--igp-surface-alt);
    color: var(--igp-text-muted);
    border: 1px solid var(--igp-border);
}
body.single-games .single-game .lozung.game-title-fix .game-badge--adult {
    background: var(--igp-accent);
    color: var(--igp-on-accent);
}