/*
 * Fortnite Center (2.txt §93–§96): тёмный баннер с картой, наезжающая на него
 * строка KPI, ниже — светлые панели. Рабочая область карты чуть темнее портала
 * (§99), но не тяжёлая. HEX здесь нет, всё из токенов.
 */

/* --- Баннер --- */

.fhero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 96px;
    background: var(--brand-900);
    color: var(--text-on-brand);
}

.fhero__media {
    position: absolute;
    top: 50%;
    right: -6%;
    width: 640px;
    max-width: 62%;
    transform: translateY(-50%);
    opacity: .55;
}

.fhero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg,
        rgba(26, 44, 114, .97) 0%,
        rgba(26, 44, 114, .92) 46%,
        rgba(26, 44, 114, .58) 76%,
        rgba(26, 44, 114, .28) 100%);
}

.fhero__inner {
    position: relative;
}

.fhero__kicker {
    color: var(--cyan-300);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fhero__title {
    margin-top: 10px;
    color: var(--text-on-brand);
}

.fhero__text {
    margin-top: 14px;
    max-width: 62ch;
    color: var(--text-on-brand-muted);
    font-size: var(--fs-body);
}

.fhero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    color: var(--text-on-brand-muted);
    font-size: var(--fs-sm);
}

.fhero__meta span {
    position: relative;
    padding-left: 16px;
}

.fhero__meta span::before {
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    content: '';
    transform: translateY(-50%);
}

.fkpi {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: -56px;
}

/* --- Карта --- */

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

.fmap__canvas {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--brand-900);
    box-shadow: var(--shadow-card);
}

.fmap__image {
    display: block;
    width: 100%;
    height: auto;
}

.fmap__poi {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.fmap__dot {
    width: 8px;
    height: 8px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    background: var(--cyan);
}

.fmap__poi--named .fmap__dot {
    width: 12px;
    height: 12px;
    background: var(--primary);
}

.fmap__label {
    margin-top: 4px;
    padding: 2px 8px;
    max-width: 20ch;
    border-radius: var(--radius-pill);
    background: rgba(16, 24, 40, .72);
    color: var(--text-on-brand);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fmap__side {
    padding: var(--card-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.fmap__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.fmap__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fmap__key::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    content: '';
}

.fmap__key--named::before {
    width: 11px;
    height: 11px;
    background: var(--primary);
}

.fmap__subtitle {
    margin-top: 16px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.fmap__list {
    margin-top: 10px;
    list-style: none;
}

.fmap__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.fmap__item:last-child {
    border-bottom: 0;
}

.fmap__name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmap__side-note {
    flex: none;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.fmap__cta {
    width: 100%;
    margin-top: 16px;
    justify-content: center;
}

.fmap__note {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}

/* --- Ориентиры --- */

.fsection__note {
    max-width: 84ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.ftags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    list-style: none;
}

.ftags__item {
    gap: 8px;
}

.ftags__note {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* --- Две панели: изменения карты и обновления игры --- */

/* Две равные панели: колонок ровно две, поэтому сетка задана явно —
   auto-fill растянул бы их на треть ширины и оставил пустое место справа. */
.fgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: var(--section-gap);
}

.fpanel h2 {
    font-size: var(--fs-h3);
}

.fpanel__note {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}

.fchanges,
.fbuilds {
    margin-top: 14px;
    list-style: none;
}

.fchanges__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.fchanges__item:last-child {
    border-bottom: 0;
}

.fchanges__kind--removed {
    background: rgba(249, 97, 96, .12);
    color: var(--danger);
}

.fchanges__kind--added,
.fchanges__kind--returned {
    background: rgba(47, 177, 112, .12);
    color: var(--success);
}

.fchanges__name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fchanges__detail {
    grid-column: 2 / 4;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

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

.fbuilds__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.fbuilds__item:last-child {
    border-bottom: 0;
}

.fbuilds__version {
    font-weight: 700;
}

.fbuilds__meta,
.fbuilds__items {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

/* --- Карточки «чего нет» и методика --- */

.fcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}

.fcards__title {
    font-size: var(--fs-h3);
}

.fcards__text {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.fcards__state {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.fmethod {
    margin: var(--section-gap) 0;
}

.fmethod h2 {
    font-size: var(--fs-h3);
}

.fmethod p {
    margin-top: 12px;
    max-width: 92ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

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

    .fgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fkpi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: -40px;
    }

    .fhero__media {
        right: -20%;
        opacity: .35;
    }
}

@media (max-width: 768px) {
    .fkpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fmap__label {
        display: none;
    }

    .fmap__poi--named .fmap__dot {
        width: 10px;
        height: 10px;
    }

    .fchanges__item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fchanges__time {
        grid-column: 1 / 3;
    }

    .fbuilds__item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fbuilds__items {
        grid-column: 1 / 3;
    }
}