/**
 * Лента изменений `/changes/` и рекорды онлайна (ТЗ §250, §253).
 *
 * Две колонки на широком экране: лента слева, рекорды и переходы справа.
 * На планшете и телефоне колонки складываются в одну — сначала лента,
 * ради неё сюда и приходят.
 */

.changes {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.changes__filters {
    margin: 0;
}

.changes__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    align-items: start;
}

.changes__feed,
.changes__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.changes__side {
    position: sticky;
    top: 90px;
}

.changes__date {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.changes__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Строка изменения ---------- */

.change {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.change:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.change__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: var(--neutral-soft);
    color: var(--neutral-text);
}

.change__icon--success {
    background: var(--success-soft);
    color: var(--success-text);
}

.change__icon--danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.change__icon--violet {
    background: var(--bg-violet);
    color: var(--primary-2);
}

/* Одна стрелка на рост и спад: вниз она смотрит зеркально. */
.change__glyph--down {
    transform: scaleY(-1);
}

.change__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.change__game {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    min-width: 0;
}

.change__game:hover {
    color: var(--primary);
}

.change__cover {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

.change__title {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.change__values {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.change__old {
    text-decoration: line-through;
}

.change__new {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

.change__arrow {
    color: var(--text-muted);
}

.change__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.change__time {
    font-size: var(--fs-micro);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------- Рекорды и переходы ---------- */

/* В узкой колонке заголовок и подпись не встают в строку. */
.changes-records .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.changes-records__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.changes-records__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.changes-records__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.changes-records__place {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.changes-records__name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    overflow: hidden;
}

.changes-records__name:hover {
    color: var(--primary);
}

.changes-records__when {
    font-size: var(--fs-micro);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

.changes-records__value {
    flex: 0 0 auto;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.changes-records__note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-micro);
    color: var(--text-muted);
}

.changes-links__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.changes-links__list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.changes-links__list a:hover {
    background: var(--bg-violet);
    color: var(--primary-2);
}

@media (max-width: 1024px) {
    .changes__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .changes__side {
        position: static;
    }
}

@media (max-width: 480px) {
    .change__side {
        align-items: flex-end;
    }

    .change__values {
        font-size: var(--fs-micro);
    }
}