/* Единая ширина публичных страниц — 1080 (как новости).
   width:100% и box-sizing:border-box обязательны: main-content — flex-column,
   без width:100% дочерний блок ужимается по контенту вместо растягивания до max-width. */
.giveaways-page,
.giveaway-view-page {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 0px 40px;
    box-sizing: border-box;
    color: var(--text-primary);
}
@media (max-width: 700px) {
    .giveaways-page,
    .giveaway-view-page { padding: 18px 16px 24px; }
}

.gv-page-title {
    color: var(--text-bright);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
}
.gv-section-title {
    color: var(--text-bright);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 20px 0 10px;
}

.gv-me-hint {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--color-warning);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.gv-me-hint a { color: var(--link); }

/* Список — одна карточка на строку. Фон = баннер розыгрыша, текст поверх с
   тёмным градиентом слева (чтобы читалось на любой картинке). */
.gv-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gv-card {
    position: relative;
    display: block;
    background-color: var(--bg-card);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 210px;
    transition: border-color 0.15s, transform 0.15s;
}
.gv-card:hover { border-color: var(--border-hover); }

/* Двухслойный оверлей:
   1) горизонтальный градиент — тёмный слева (там текст) → полупрозрачный справа
   2) виньетка снизу, чтобы футер (таймер/счётчик) точно читался. */
.gv-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20,24,31,0.90) 0%, rgba(20,24,31,0.75) 55%, rgba(20,24,31,0.30) 100%),
        linear-gradient(180deg, rgba(20,24,31,0.15) 0%, rgba(20,24,31,0.15) 60%, rgba(20,24,31,0.55) 100%);
    pointer-events: none;
}

.gv-card-content {
    position: relative;
    z-index: 1;
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    min-height: inherit;
    /* Занимаем всю высоту карточки, чтобы футер прижался вниз. */
    height: 100%;
    box-sizing: border-box;
}
.gv-card-top { flex: 1; }
.gv-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.gv-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    /* Полупрозрачный тёмный фон под текстом — читается на любой картинке. */
    backdrop-filter: blur(4px);
}
.gv-badge-idle     { background: rgba(232, 139, 139, 0.22); color: #ff9a9a; border: 1px solid rgba(232, 139, 139, 0.55); }
.gv-badge-joined   { background: rgba(109, 214, 164, 0.22); color: #9ff0c6; border: 1px solid rgba(109, 214, 164, 0.55); }
.gv-badge-closed   { background: rgba(126, 168, 224, 0.22); color: #b8d1f0; border: 1px solid rgba(126, 168, 224, 0.55); }
.gv-badge-cancelled{ background: rgba(20, 24, 31, 0.65);    color: #cfd3d9; border: 1px solid rgba(255,255,255,0.15); }

.gv-card-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    /* Не более 2х строк — картинка тогда не «съедается» длинным заголовком. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gv-card-subtitle {
    color: rgba(230, 233, 238, 0.85);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 12px;
    /* Не больше 2 строк. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.gv-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.gv-card-count {
    color: rgba(230, 233, 238, 0.9);
    font-size: 12px;
    margin-left: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* «Пилюля» таймера в футере карточки: полупрозрачный тёмный фон,
   иконка + значение + подпись. Специально не наследует .gv-card фон. */
.gv-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 24, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 6px 12px;
    color: rgba(230, 233, 238, 0.95);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}
.gv-timer .gv-timer-icon { color: var(--color-success); }
.gv-timer .gv-timer-value {
    color: #fff;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.5px;
    font-size: 13px;
}
.gv-timer .gv-timer-hint {
    color: rgba(230, 233, 238, 0.6);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
}
.gv-timer-done .gv-timer-icon { color: var(--link); }

/* На узком экране — тот же формат, но чуть уменьшаем шрифты. */
@media (max-width: 640px) {
    .gv-card { min-height: 160px; }
    .gv-card-title { font-size: 18px; }
    .gv-card-content { padding: 14px 16px 12px; }
}

.gv-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}
.gv-status-active    { background: rgba(109, 214, 164, 0.15); color: var(--color-success); }
.gv-status-closed    { background: rgba(126, 168, 224, 0.15); color: var(--link); }
.gv-status-cancelled { background: rgba(232, 139, 139, 0.15); color: var(--color-danger); }

/* ---- Detail view ---- */
.gv-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 12px;
}
.gv-back:hover { color: var(--text-bright); }

.gv-detail {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

/* Hero: полная ширина карточки, картинка-фон, оверлей, крупный заголовок и мета
   поверх картинки. Оверлей — вертикальный (тёмный сверху → чуть темнее снизу),
   так что и заголовок, и футер с таймером читаются на любом фоне. */
.gv-hero {
    position: relative;
    background-color: var(--bg-inner);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 28px 28px 22px;
    min-height: 260px;
    display: flex;
    align-items: stretch;
}
.gv-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20,24,31,0.55) 0%, rgba(20,24,31,0.35) 40%, rgba(20,24,31,0.75) 100%),
        linear-gradient(90deg,  rgba(20,24,31,0.55) 0%, rgba(20,24,31,0.20) 60%, rgba(20,24,31,0.10) 100%);
    pointer-events: none;
}
.gv-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.gv-hero-badges { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.gv-hero-title {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    overflow-wrap: anywhere;
}
.gv-hero-prize {
    color: rgba(230, 233, 238, 0.95);
    font-size: 15px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 18px;
}
.gv-hero-prize b { color: #fff; font-weight: 700; }
.gv-hero-footer {
    margin-top: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.gv-hero-count {
    color: rgba(230, 233, 238, 0.9);
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    margin-left: auto;
}
@media (max-width: 640px) {
    .gv-hero        { padding: 20px 18px 16px; min-height: 220px; }
    .gv-hero-title  { font-size: 22px; }
    .gv-hero-prize  { font-size: 14px; }
}

/* Тело: описание, победитель, участие, участники — под hero. */
.gv-detail-body { padding: 20px 24px; }
@media (max-width: 640px) { .gv-detail-body { padding: 16px 18px; } }

.gv-detail-description {
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 14px;
}
.gv-detail-description p { margin: 0 0 8px; }
.gv-detail-description p:last-child { margin-bottom: 0; }
.gv-detail-description img { max-width: 100%; border-radius: 4px; }
.gv-detail-description a { color: var(--link); }
.gv-detail-description h2 { color: var(--text-bright); font-size: 18px; margin: 12px 0 6px; }
.gv-detail-description h3 { color: var(--text-bright); font-size: 16px; margin: 10px 0 6px; }
.gv-detail-description ul,
.gv-detail-description ol { margin: 4px 0 10px; padding-left: 24px; }
.gv-detail-description blockquote {
    margin: 6px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--border-hover);
    background: var(--bg-inner);
    color: var(--text-secondary);
    border-radius: 0 4px 4px 0;
}

/* Блоки кода. Цвета токенов задаёт code_highlight.css, а фон, рамку и отступы
   каждый раздел описывает у себя - иначе тема перебила бы вёрстку остальных.
   Здесь этого правила не было, и код на странице розыгрыша выглядел голым
   текстом без подложки, хотя подсветка и панелька с копированием работали. */
.gv-detail-description pre {
    background: var(--bg-inner);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin: 10px 0;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Инлайновый код - только вне блока: внутри <pre> подложка не нужна. */
.gv-detail-description code {
    background: var(--bg-inner);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}
.gv-detail-description pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.gv-join-panel {
    background: var(--bg-inner);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
    /* Кнопка сверху блоком, комментарии — под ней. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.gv-join-panel h3 { color: var(--text-bright); font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: 0.4px; }
.gv-join-panel .note { color: var(--text-muted); font-size: 12px; margin: 0; }
.gv-join-panel .note a { color: var(--link); }
.gv-join-warn { color: var(--color-warning); font-size: 13px; }
.gv-join-warn a { color: var(--link); }

.gv-btn-participate {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
}

.gv-winner-block {
    background: rgba(126, 168, 224, 0.10);
    border: 1px solid rgba(126, 168, 224, 0.35);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 14px 0;
    color: var(--text-bright);
}
.gv-winner-mine {
    background: rgba(109, 214, 164, 0.12);
    border-color: rgba(109, 214, 164, 0.45);
}
.gv-winner-title {
    font-weight: 600;
    margin-bottom: 8px;
}
/* Несколько мест: строки идут одна под другой, между ними воздух. */
.gv-winner-head + .gv-winner-head { margin-top: 8px; }
.gv-winner-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* И <img>, и текстовый плейсхолдер: круг фиксированного размера. */
/* С <picture> флекс-элементом становится обёртка, и размер надо задавать ей:
   flex-basis на вложенном img на раскладку уже не влияет. То же и для .gv-framed,
   когда у победителя надета рамка. */
.gv-winner-head > picture,
.gv-winner-head > .gv-framed {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}
/* Внутри рамки аватарка занимает всю обёртку, а не свои 32px. */
.gv-winner-head .gv-framed .gv-winner-avatar {
    width: 100%;
    height: 100%;
    flex: none;
}

.gv-winner-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-inner);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Блок проверки честности - настоящий <pre>: выравнивание держится пробелами,
   поэтому переносить строки нельзя. Длинные хэши уезжают в горизонтальный
   скролл внутри блока, как в обычном терминале. Раскраска по ролям: ключи,
   значения, победители, своя строка. */
.gv-verify {
    margin: 10px 0 0;
    font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-inner);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}
.gv-verify .k    { color: var(--link); font-weight: 600; }
.gv-verify .v    { color: var(--text-muted); }
.gv-verify .c    { color: var(--text-secondary); }
.gv-verify .w    { color: var(--color-warning); font-weight: 600; }
.gv-verify .me   { color: var(--color-success); font-weight: 600; }
.gv-verify .mark { color: var(--color-warning); }
.gv-verify .mark-me { color: var(--color-success); }

@media (max-width: 640px) {
    .gv-verify { font-size: 11.5px; padding: 10px; }
}
/* Ссылки внутри блока победителей (например, на FAQ в пояснении). Без явного
   правила браузер красит посещённые в свой фиолетовый: глобального a:visited
   в проекте нет, каждый раздел задаёт цвет ссылок у себя. */
.gv-winner-block a { color: var(--link); }
.gv-winner-block a:hover { text-decoration: underline; }

.gv-verify-toggle {
    color: var(--link);
    cursor: pointer;
    font-size: 12px;
    /* Отделяем от последней строки победителя - раньше прилипало вплотную. */
    margin-top: 14px;
    display: inline-block;
}
.gv-verify-content { display: none; margin-top: 8px; }
.gv-verify-content.open { display: block; }

.gv-participants-line {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Таймер обратного отсчёта в шапке детальной страницы */
.gv-countdown-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-inner);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.gv-countdown-wrap b {
    color: var(--text-bright);
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.5px;
}

/* Аватарки участников */
.gv-participants-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.gv-participants-block h4 {
    color: var(--text-bright);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
}
.gv-parts-count { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.gv-participants-empty {
    color: var(--text-muted);
    font-size: 13px;
}
.gv-avatars-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gv-avatar {
    /* overflow: hidden УБРАН — иначе обрезает всплывающий тултип
       (стрелка/бабл через ::before/::after выходят за пределы 40×40).
       Круглую форму держит на img/placeholder. */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-inner);
    border: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gv-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Анимированная аватарка приходит в <picture> (статичная замена для
   prefers-reduced-motion). Обёртка по умолчанию строчная и схлопнулась бы,
   поэтому размер держит она, а не img внутри. */
.gv-avatar picture { display: block; width: 100%; height: 100%; }

/* Рамка из Points Shop лежит поверх аватарки. Разметка всегда одна:
   .gv-framed > (аватарка) + <picture> с рамкой последним потомком. */
.gv-framed {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
/* Аватарка внутри обёртки занимает её целиком - чем бы она ни была:
   <picture> с анимацией, обычный <img> или буква-заглушка. */
.gv-framed > picture:first-child,
.gv-framed > img,
.gv-framed > span {
    display: block;
    width: 100%;
    height: 100%;
}
/* Рамка. Пропорция 122% взята у Steam: там рамка 224px на аватарку 184px,
   при другом соотношении она села бы мимо края. За границы ячейки выходит
   намеренно, сетку это не двигает. */
.gv-framed > picture:last-child {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 122%;
    height: 122%;
    transform: translate(-50%, -50%);
    /* Украшение: клики не ловит и в выделение не попадает. */
    pointer-events: none;
    user-select: none;
}
.gv-framed > picture:last-child > .gv-frame {
    display: block;
    width: 100%;
    height: 100%;
}

/* Рамки Points Shop нарисованы вокруг КВАДРАТНОЙ аватарки (у Steam 184px в
   проёме 224px). На круглой аватарке проём ложится ровно по краю круга, и
   рамка выглядит обрезанной - поэтому под рамкой скругление уменьшаем. */
.gv-avatar-framed,
.gv-avatar-framed img,
.gv-avatar-framed picture,
.gv-winner-head .gv-framed .gv-winner-avatar {
    border-radius: 6px;
}
.gv-avatar-framed .gv-frame,
.gv-winner-head .gv-framed .gv-frame {
    border-radius: 0;
}
.gv-avatar-placeholder {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Заменённый победитель: остаётся в списке, но приглушён и подписан причиной.
   Убирать его нельзя - тихая подмена имени обесценила бы всю проверяемость. */
.gv-winner-replaced { opacity: 0.6; }
.gv-winner-replaced b { text-decoration: line-through; }
.gv-replaced-note {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Плашка «уведомления выключены» (push.js) на списке розыгрышей. */
.gv-push-warn { margin-bottom: 12px; }