/* ============================================================
   Еженедельный розыгрыш — /giveaway.

   Оформление как на главной: карточка на --card-color, рамка в 7%
   белого, радиус 20px, заголовок блока — .modes__head из modes-grid.css.

   Приставка gw-. Раньше стили лежали пятью кусками <style> прямо в
   шаблоне, и один из них задавал правила голому тегу button — то есть
   всем кнопкам страницы, включая чужие. Оттуда же тянулись правила для
   кнопок #start-btn, #pause-btn, #reset-btn и блока .deadline-settings,
   которых в разметке нет вовсе: остатки чужого примера с таймером.

   Классы окна победителей (.grid-winner, .winner-*) оставлены прежними:
   их пишет PHP в шаблоне, и переименование ничего не даёт.
   ============================================================ */

/* ---------- сетка страницы ---------- */
.gw-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.gw-row--flip { grid-template-columns: 1fr 2fr; }

@media (max-width: 1100px) {
    .gw-row,
    .gw-row--flip { grid-template-columns: 1fr; }
}

/* ---------- карточка ---------- */
.gw-card {
    display: flex;
    flex-direction: column;
    background: var(--card-color);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    padding: 22px;
}

.gw-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.gw-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(95, 101, 220, .35);
}

.gw-card__title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.gw-card__count {
    margin-left: auto;
    font-size: 13px;
    color: #8f8f9c;
}

.gw-empty {
    margin: auto 0;
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: #8f8f9c;
}

/* ---------- таймер ---------- */
.gw-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: auto 0;
}

.gw-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

.gw-unit__value {
    font-family: Oswald, sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.gw-unit__label {
    font-size: 12px;
    color: #8f8f9c;
}

/* ---------- участники и победители ---------- */
.gw-people {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 208px;
    overflow: auto;
    padding-right: 6px;
}

.gw-people--single { grid-template-columns: 1fr; }

.gw-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    text-decoration: none;
    transition: border-color 140ms ease;
}

.gw-person:hover { border-color: rgba(95, 101, 220, .45); text-decoration: none; }

.gw-person img {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.gw-person__text { min-width: 0; }

.gw-person__name {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gw-person__sub {
    display: block;
    font-size: 11px;
    color: #8f8f9c;
}

/* ---------- призы ---------- */
.gw-prizes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 860px) {
    .gw-prizes { grid-template-columns: 1fr; }
}

.gw-prize {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

/* Полоска цвета редкости слева — от прежнего оформления призов */
.gw-prize::before {
    content: '';
    align-self: stretch;
    flex: 0 0 3px;
    border-radius: 3px;
    background: var(--accent);
}

.gw-prize img {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    object-fit: contain;
}

.gw-prize__name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.gw-prize__desc {
    margin-top: 2px;
    font-size: 12px;
    color: #8f8f9c;
}

/* ---------- шаги и правила ---------- */
.gw-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gw-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #b5b5c0;
}

.gw-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(95, 101, 220, .16);
    color: var(--a-href-color);
    font-size: 12px;
    font-weight: 600;
}

.gw-step a { color: var(--a-href-color); }

/* ---------- кнопка участия ---------- */
.gw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 13px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--btn-wallet-color);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}

.gw-btn:hover { background: var(--btn-wallet-color-hover); color: #fff; text-decoration: none; }

.gw-btn--done {
    background: rgba(0, 188, 115, .1);
    border: 1px solid rgba(0, 188, 115, .3);
    color: #23c58a;
    cursor: default;
}

.gw-btn--done:hover { background: rgba(0, 188, 115, .1); color: #23c58a; }

/* ---------- окно победителей ---------- */
#lastWinnersModal .modal-content {
    width: 500px;
    max-width: 90vw;
}

/* Список с прокруткой: победителей может быть сколько угодно, а окно
   не должно вырастать так, что крестик уезжает за край экрана */
.grid-winners {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.grid-winner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(95, 101, 220, .2);
    border-radius: 12px;
    background: var(--close-modal);
    transition: all .3s ease;
}

.grid-winner:hover {
    border-color: rgba(95, 101, 220, .5);
    transform: translateY(-2px);
}

.winnerImg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent);
}

.winner-place-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    border-bottom-left-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.winner-place-badge.place-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; }
.winner-place-badge.place-2 { background: linear-gradient(135deg, #C0C0C0, #808080); color: #000; }
.winner-place-badge.place-3 { background: linear-gradient(135deg, #CD7F32, #8B4513); color: #fff; }

.winner-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.winner-login {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color .3s ease;
}

.winner-login:hover { color: var(--accent); text-decoration: none; }

.winner-prize {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #a7a7a7;
}

.winner-prize-icon { color: var(--accent); font-size: 16px; }