/* NEWS */
.news {
    max-width: 1300px;
    width: 100%;
    margin: 56px auto 0
}

.news-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .news-head h2 {
        font: 800 26px/1.3 Manrope;
        margin: 0;
        color: #fff
    }

.all-news-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .2px;
    background: linear-gradient(135deg, rgba(var(--acc-a),.14), rgba(var(--acc-b),.14));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease
}

    .all-news-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, rgba(var(--acc-a),.28), rgba(var(--acc-b),.28));
        border-color: rgba(255,255,255,.22)
    }

.news-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 16px;
    align-items: stretch
}

.news-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06)
}

    .news-card.__image {
        min-height: 260px;
        background: #0b0f14 center/cover no-repeat
    }

    .news-card .shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 84%)
    }

    .news-card .body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px
    }

    .news-card .kicker {
        font: 700 12px/1 Inter;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #cffff7
    }

    .news-card .title {
        font: 800 22px/1.25 Manrope;
        color: #fff;
        margin-top: 6px
    }

    .news-card .meta {
        color: #dfe6ec;
        margin-top: 8px;
        font-weight: 600
    }

.fast-card {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.48);
    border-color: rgba(255,255,255,.14);
    padding: 6px 0;
    backdrop-filter: blur(2px)
}

    .fast-card .item {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        border-radius: 10px;
        background: transparent;
        transition: background .15s ease
    }

        .fast-card .item:last-child {
            border-bottom: 0
        }

        .fast-card .item:hover {
            background: rgba(255,255,255,.06)
        }

    .fast-card .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(var(--acc-a),1), rgba(var(--acc-b),1));
        margin-top: 6px;
        flex: none
    }

    .fast-card .title {
        font: 700 16px/1.3 Manrope;
        color: #fff
    }

    .fast-card .meta {
        color: #dfe6ec;
        font-weight: 600;
        margin-top: 4px
    }

    .fast-card .sum {
        color: #e9f2f7;
        opacity: .92;
        margin-top: 4px;
        font-weight: 600
    }

@media (max-width:1020px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-head {
        flex-wrap: wrap;
        gap: 8px
    }

    .all-news-btn {
        order: 2;
        margin-top: 6px;
        align-self: flex-end
    }
}

:root {
    --bg: #000;
    --txt: #fff;
    --mut: #ccc;
    --acc-a: 34,211,238; /* cyan */
    --acc-b: 52,211,153; /* green */
    ;
    --center-line: 2px
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: #000;
    color: var(--txt);
    font: 16px/1.5 Inter,system-ui
}

a {
    color: inherit;
    text-decoration: none
}

#site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 50
}

/* BACKGROUNDS */
.bg-layer {
    position: fixed;
    inset: 0;
    background: #000 center/cover no-repeat;
    opacity: 0;
    transition: opacity 900ms ease;
    z-index: -2
}

    .bg-layer.__show {
        opacity: 1
    }

.bg-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: -2;
    pointer-events: none
}

main {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 18px 60px
}

/* HERO */
.hero {
    max-width: 1300px;
    width: 100%;
    text-align: center
}

    .hero h1 {
        font: 800 34px/1.3 Manrope,Inter;
        margin: 0 0 26px;
        color: #fff !important;
        text-shadow: 0 2px 20px rgba(0,0,0,.6)
    }

.tline {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    margin: 8px 0 8px
}

    .tline .t-prefix {
        font: 800 72px/1 Manrope,Inter;
        letter-spacing: 4px;
        color: #fff !important;
        text-shadow: 0 3px 22px rgba(0,0,0,.6)
    }

.tblock {
    display: grid;
    place-items: center;
    min-width: 130px
}

    .tblock .num {
        font: 800 120px/1 Manrope,Inter;
        letter-spacing: 2px;
        color: #fff !important;
        text-shadow: 0 4px 28px rgba(0,0,0,.7)
    }

    .tblock .lbl {
        margin-top: 6px;
        color: var(--mut);
        font-weight: 700;
        text-shadow: none
    }

.colon {
    font: 800 90px/1 Manrope,Inter;
    color: #fff !important;
    transform: translateY(-8px);
    text-shadow: 0 3px 18px rgba(0,0,0,.6)
}

/* MISSION TITLE CENTERED */
.mission-center {
    font: 800 28px/1.4 Manrope;
    margin: 14px 0 26px;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.65)
}

/* TWO COLUMNS */
.cols {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px,1fr) minmax(320px,1fr);
    align-items: start;
    column-gap: var(--center-line);
    margin-top: 56px
}

    .cols::before {
        content: "";
        position: absolute;
        top: -36px;
        bottom: -36px;
        left: 50%;
        transform: translateX(-50%);
        width: var(--center-line);
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, rgba(255,255,255,0) 100%);
        z-index: 0
    }

.col {
    flex: 0 1 clamp(320px, 34vw, 520px);
    text-align: left
}

    .col:first-child {
        text-align: right;
        padding-right: 0
    }

        .col:first-child .panel {
            margin-right: 0
        }

        .col:first-child .kv {
            justify-content: flex-end
        }

    .col:nth-child(2) {
        text-align: left;
        padding-left: 0
    }

        .col:nth-child(2) .panel {
            margin-left: 0
        }

    .col h2 {
        font: 800 26px/1.3 Manrope;
        margin: 0 0 12px;
        color: #fff !important;
        letter-spacing: .3px;
        text-shadow: 0 2px 16px rgba(0,0,0,.6)
    }

.card {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 8px;
    background: transparent;
    backdrop-filter: none;
    text-align: left;
    box-shadow: none
}

.kv {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #ccc;
    margin: 6px 0;
    line-height: 1.35;
    font-weight: 600
}

    .kv strong {
        color: #fff !important;
        font-weight: 800
    }

.next-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    background: transparent
}

    .next .title {
        font: 700 18px/1.3 Manrope;
        color: #fff !important
    }

    .next .meta {
        color: var(--mut)
    }

/* RESPONSIVE */
@media (max-width:1020px) {
    .tblock {
        min-width: 110px
    }

        .tblock .num {
            font-size: 96px
        }

    .tline .t-prefix {
        font-size: 52px
    }

    .colon {
        font-size: 74px
    }

    .cols {
        gap: 36px
    }

    .mission-center {
        font-size: 24px
    }
}

@media (max-width:1020px) {
    /* move the "All launches" button to a new row at the bottom of the right panel */
    .cols .col:nth-child(2) .panel {
        display: flex;
        flex-direction: column
    }

        .cols .col:nth-child(2) .panel h2 {
            order: 1
        }

        .cols .col:nth-child(2) .panel .next-list {
            order: 2
        }

        .cols .col:nth-child(2) .panel .all-launches-btn {
            position: static;
            order: 3;
            margin-top: 12px;
            align-self: flex-end
        }
}

@media (max-width:780px) {
    main {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 18px 60px
}

    .tblock {
        min-width: 90px
    }

        .tblock .num {
            font-size: 72px
        }

    .tline .t-prefix {
        font-size: 40px
    }

    .colon {
        font-size: 56px
    }

    .cols {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 24px;
        text-align: center
    }

        .cols::before {
            display: none
        }

    .col {
        text-align: center
    }

    .mission-center {
        font-size: 22px
    }
}

.kv .ico, .right-icons svg {
    width: 18px;
    height: 18px;
    color: #ccc;
    opacity: .95
}

/* clickable rocket link */
.veh-link {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(var(--acc-a),.18), rgba(var(--acc-b),.18));
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    font-weight: 700;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(2px)
}

    .veh-link:hover {
        background: linear-gradient(135deg, rgba(var(--acc-a),.26), rgba(var(--acc-b),.26));
        border-color: rgba(255,255,255,.14)
    }

.next .vehicle .veh-link {
    font-weight: 700
}

.right-icons {
    display: flex;
    align-items: center;
    gap: 10px
}
/* panels */
.panel {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 12px 12px;
    box-shadow: 0 10px 32px rgba(0,0,0,.35)
}

.next-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    transition: transform .15s ease, background .15s ease, border-color .15s ease
}

    .next-item .title {
        font: 800 20px/1.35 Manrope;
        color: #fff
    }

    .next-item .vehicle {
        margin-top: 4px;
        color: #e8edf2;
        font-weight: 700
    }

    .next-item .meta {
        color: #dfe6ec
    }

    /* контейнер со стрелкой — фиксируем размеры и центрируем */
    .next-item .right-icons {
        position: relative;
        min-width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* тултип — узкий, всегда одной строкой, над стрелкой */
        .next-item .right-icons .tip {
            position: absolute;
            right: 0;
            bottom: calc(100% + 6px);
            white-space: nowrap;
            font: 600 14px/1 Inter;
            color: #fff;
            opacity: 0;
            pointer-events: none;
            transform: translateY(0);
            transition: opacity .18s ease, transform .18s ease;
        }

    /* показать при hover/focus */
    .next-item:hover .right-icons .tip {
        opacity: 1;
        transform: translateY(-2px);
    }

        .next-item .right-icons svg {
            transition: transform .18s ease
        }

    .next-item:hover .right-icons svg {
        transform: rotate(-20deg)
    }

    .next-item:hover .right-icons .tip {
        opacity: 1;
        transform: translateX(0) translateY(-6px)
    }

    .next-item:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.2)
    }

.kv.desc {
    align-items: flex-start;
    line-height: 1.45
}

.corner-link {
    position: absolute;
    top: 12px;
    left: 14px !important;
    right: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 20
}

    .corner-link svg {
        transition: transform .18s ease
    }

    .corner-link:hover svg {
        transform: rotate(20deg)
    }

.panel:hover .corner-link svg {
    transform: rotate(20deg)
}

.corner-link .tip {
    position: absolute;
    top: 50%;
    left: 50px;
    white-space: nowrap;
    font: 600 12px/1 Inter;
    opacity: 0;
    visibility: hidden; /* ← добавили */
    pointer-events: none; /* ← добавили, чтобы не ловила курсор */
    transform: translateX(-12px) translateY(-50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.corner-link:hover .tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(-50%);
}

/* Left card: "More about the launch" */
.mission-link {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 20; /* поверх всего внутри панели */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    pointer-events: auto;
}

    .mission-link .tip {
        white-space: nowrap;
        opacity: 0; /* по умолчанию скрыта */
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-10px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .mission-link:hover .tip {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* анимация поворота иконки у ссылки "More about the launch" */
    .mission-link svg {
        transition: transform .2s ease;
        transform-origin: 50% 50%;
        will-change: transform;
    }

    /* поворот при ховере/фокусе ссылки */
    .mission-link:hover svg,
    .mission-link:focus-visible svg {
        transform: rotate(20deg);
    }

.all-launches-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .2px;
    background: linear-gradient(135deg, rgba(var(--acc-a),.14), rgba(var(--acc-b),.14));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease
}

    .all-launches-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, rgba(var(--acc-a),.28), rgba(var(--acc-b),.28));
        border-color: rgba(255,255,255,.22)
    }

    .all-launches-btn i {
        width: 16px;
        height: 16px
    }

.panel--left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 270px;
    pointer-events: none;
    border-top-left-radius: 16px;
    opacity: .55;
    filter: blur(3px);
    z-index: 0;
    background:
    /* широкие полосы и такие же широкие интервалы */
    repeating-linear-gradient(135deg, rgba(var(--acc-a),.34) 0 18px, rgba(var(--acc-a),0) 18px 36px), repeating-linear-gradient(135deg, rgba(var(--acc-b),.26) 0 16px, rgba(var(--acc-b),0) 16px 32px), repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 36px);
    -webkit-mask-image: radial-gradient(300px 220px at 0 0, #000 58%, transparent 82%);
    mask-image: radial-gradient(300px 220px at 0 0, #000 58%, transparent 82%);
}
/* гарантируем, что контент панели поверх блика */
.panel--left {
    overflow: hidden;
    position: relative;
    isolation: isolate
}

    .panel--left > * {
        position: relative;
        z-index: 1
    }

    .panel--left .corner-link {
        left: 14px !important;
        right: auto !important;
    }

/* inner margins near the center line only when columns are side‑by‑side */
@media (min-width: 781px) {
    .cols .col:first-child .panel {
        margin-right: 15px
    }

    .cols .col:nth-child(2) .panel {
        margin-left: 15px
    }
}
/* NEWS */
.news {
    max-width: 1300px;
    width: 100%;
    margin: 56px auto 0
}

.news-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .news-head h2 {
        font: 800 26px/1.3 Manrope;
        margin: 0;
        color: #fff
    }

.all-news-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .2px;
    background: linear-gradient(135deg, rgba(var(--acc-a),.14), rgba(var(--acc-b),.14));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease
}

    .all-news-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, rgba(var(--acc-a),.28), rgba(var(--acc-b),.28));
        border-color: rgba(255,255,255,.22)
    }

.news-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 16px;
    align-items: stretch
}

.news-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06)
}

    .news-card.__image {
        min-height: 260px;
        background: #0b0f14 center/cover no-repeat
    }

    .news-card .shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 84%)
    }

    .news-card .body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px
    }

    .news-card .kicker {
        font: 700 12px/1 Inter;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #cffff7
    }

    .news-card .title {
        font: 800 22px/1.25 Manrope;
        color: #fff;
        margin-top: 6px
    }

    .news-card .meta {
        color: #dfe6ec;
        margin-top: 8px;
        font-weight: 600
    }

.fast-card {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.48);
    border-color: rgba(255,255,255,.14);
    padding: 6px 0;
    backdrop-filter: blur(2px)
}

    .fast-card .item {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        border-radius: 10px;
        background: transparent;
        transition: background .15s ease
    }

        .fast-card .item:last-child {
            border-bottom: 0
        }

        .fast-card .item:hover {
            background: rgba(255,255,255,.06)
        }

    .fast-card .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(var(--acc-a),1), rgba(var(--acc-b),1));
        margin-top: 6px;
        flex: none
    }

    .fast-card .title {
        font: 700 16px/1.3 Manrope;
        color: #fff
    }

    .fast-card .meta {
        color: #dfe6ec;
        font-weight: 600;
        margin-top: 4px
    }

    .fast-card .sum {
        color: #e9f2f7;
        opacity: .92;
        margin-top: 4px;
        font-weight: 600
    }

@media (max-width:1020px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-head {
        flex-wrap: wrap;
        gap: 8px
    }

    .all-news-btn {
        order: 2;
        margin-top: 6px;
        align-self: flex-end
    }
}

/* ===== Timer: 481–768px — одна строка, просто компактнее ===== */
@media (min-width: 481px) and (max-width: 768px) {
    .tline

{
    display: flex;
    gap: clamp(12px, 2.5vw, 22px);
    align-items: flex-end;
}

.tline .t-prefix {
    font-size: clamp(28px, 5.5vw, 44px);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.tblock .num {
    font-size: clamp(56px, 10vw, 86px);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: 1;
}

.tblock .lbl {
    font-size: 13px;
}

.colon {
    font-size: clamp(34px, 7vw, 58px);
    transform: translateY(-6px);
}

}

/* ===== Timer: <=480px — строгая сетка 2×2, равные отступы ===== */
@media (max-width: 480px) {
    /* центрируем и ограничиваем ширину, чтобы колонки не уезжали к краям */
    .tline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px; /* одинаковые горизонт/вертикаль */
        justify-items: center;
        align-items: center;
        max-width: 360px; /* чтобы было близко друг к другу */
        margin: 0 auto;
    }

        /* прячем T± и двоеточия */
        .tline .t-prefix,
        .tline .colon {
            display: none !important;
        }

    /* выравниваем плитки */
    .tblock {
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .tblock .num {
            font-size: clamp(42px, 18vw, 64px);
            font-variant-numeric: tabular-nums; /* одинаковая ширина цифр */
            font-feature-settings: "tnum" 1;
            line-height: 1;
        }

        .tblock .lbl {
            font-size: 13px;
            margin-top: 8px;
        }
}


/* Sheen stripe hover for news cards */
.news-card::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:-8px;
    width: 10px;
    background: linear-gradient(180deg, rgba(160,255,232,0) 0%, rgba(160,255,232,.55) 50%, rgba(160,255,232,0) 100%);
    filter: blur(3px);
    opacity:0;
    transform: translateX(0);
    transition: opacity .25s ease, transform .6s ease;
    pointer-events:none;
}
.news-card:hover::before{
    opacity:.9;
    transform: translateX(6px);
}


.fast-card .item{
    position: relative;
}
.fast-card .item::before{
    content:"";
    position:absolute;
    left:0; top:6px; bottom:6px;
    width:4px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(var(--acc-a),.0) 0%, rgba(var(--acc-a),.85) 50%, rgba(var(--acc-a),.0) 100%);
    opacity:0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .35s ease;
}
.fast-card .item:hover::before{
    opacity:1;
    transform: translateX(0);
}
.fast-card .fast-head{
    padding: 8px 14px 2px;
    color:#cffff7;
    font: 700 12px/1 Inter;
    text-transform: uppercase;
    letter-spacing:.5px;
}





/* === Alpha sticky bar — all screens === */
.alpha-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(980px, 96vw);
  z-index: 60;
  color: #fff;
  pointer-events: auto;
  font-family: Inter, system-ui, sans-serif;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.alpha-bar .alpha-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px; /* тонкая верхняя полоска */
  border: 1px solid rgba(255,255,255,.25);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  color: #fff;
  font-family: Manrope, Inter, system-ui, sans-serif; /* Manrope сверху */
  font-weight: 900;
  letter-spacing: .4px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.3), 0 10px 38px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  background: linear-gradient(135deg,#5e0a1c 0%, #6e1030 18%, #4d0f3a 55%, #2c0f3f 100%); /* тёмный премиум‑градиент: бордово‑красный → фиолетовый */
}
.alpha-bar .alpha-toggle .alpha-title { font-weight: 900; }
.alpha-bar .alpha-toggle .alpha-msg { font-weight: 800; opacity: .95; }
.alpha-bar .alpha-toggle svg { width: 18px; height: 18px; opacity: .95; }
.alpha-bar .alpha-toggle .chev { transition: transform .22s ease; }

.alpha-bar .alpha-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
  border: 1px solid rgba(255,255,255,.22);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 0 14px env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(24,10,20,.92), rgba(18,8,28,.92)); /* тёмный общий фон */
  backdrop-filter: blur(2px);
}
.alpha-bar .alpha-top {
  font: 800 14px/1.45 Inter, system-ui, sans-serif; /* Inter снизу */
  color: #fff;
  margin: 12px 0 6px;
}
.alpha-bar .alpha-text {
  font: 800 14px/1.45 Inter, system-ui, sans-serif;
  color: #fff;
  margin: 4px 0 10px;
}
.alpha-bar .alpha-links {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
}
.alpha-bar .alpha-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
}
.alpha-bar .alpha-link:hover { background: rgba(255,255,255,.16); }

.alpha-bar.open .alpha-panel { max-height: 260px; }
.alpha-bar.open .alpha-toggle .chev { transform: rotate(180deg); }

@media (max-width: 780px) {
  .alpha-bar { width: min(740px, 96vw); }
}

.ss-left{ text-align:left; display:flex; flex-direction:column; align-items:flex-start; }

.starship{ align-self: stretch }


/* ========== HOME GALLERY PREVIEW ========== */
.home-gallery{ max-width:1300px; width:100%; margin: 28px auto 0; }
.home-gallery .hg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.home-gallery .hg-head h2{ font:800 26px/1.3 Manrope; margin:0; color:#fff; }
.all-gallery-btn{
  display:inline-flex; align-items:center; gap:8px; padding:5px 10px;
  border-radius:12px; color:#fff; font-weight:700; font-size:15px; line-height:1; letter-spacing:.2px;
  background: linear-gradient(135deg, rgba(var(--acc-a),.14), rgba(var(--acc-b),.14));
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(2px); transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.all-gallery-btn:hover{ transform: translateY(-1px); background: linear-gradient(135deg, rgba(var(--acc-a),.28), rgba(var(--acc-b),.28)); border-color: rgba(255,255,255,.22); }
.hg-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.hg-card{ position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.32); box-shadow: 0 10px 32px rgba(0,0,0,.35); display:block; }
.hg-img{ width:100%; height:220px; object-fit:cover; display:block; background:#0b0f14; }
.hg-caption{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.72) 100%); color:#fff; font-weight:700; }
.hg-credit{ color:#dfe6ec; font-weight:600; opacity:.92; margin-top:4px; }

/* === STARSHIP BLOCK (strong) === */
section.starship{ position:relative; max-width:1300px; width:100%; margin: 44px auto 8px; padding:18px; border-radius:18px; 
  background: rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.10); box-shadow: 0 12px 36px rgba(0,0,0,.45); 
  overflow:hidden; isolation:isolate; align-self:stretch; }
section.starship::before{ content:""; position:absolute; inset:-40px; pointer-events:none; z-index:0;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.10), transparent 60%), radial-gradient(900px 480px at 80% 120%, rgba(160,255,232,.08), transparent 60%);
  filter: blur(6px); opacity:.35; }
section.starship .ss-wrap{ position:relative; z-index:1; display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:stretch; }
section.starship .ss-left{ text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
section.starship .ss-title{ font:800 26px/1.3 Manrope,Inter; margin:0 0 10px; color:#fff; }
section.starship .ss-timer{ display:flex; align-items:flex-end; gap:16px; }
section.starship .ss-num{ font:800 68px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.6); min-width:80px; text-align:center; }
section.starship .ss-colon{ font:800 54px/1 Manrope,Inter; transform: translateY(-6px); color:#fff; }
section.starship .ss-date{ margin-top:10px; color:#dfe6ec; font-weight:700; }
section.starship .ss-right{ display:flex; flex-direction:column; gap:14px; }
section.starship .ss-card{ display:flex; gap:12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); padding:10px; background: rgba(255,255,255,.06); align-items:center; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
section.starship .ss-card:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
section.starship .ss-img{ width:84px; height:70px; object-fit:cover; border-radius:10px; background:#0b0f14; flex:none; }
section.starship .ss-name{ font:800 18px/1.2 Manrope,Inter; color:#fff; }
/* Status: plain text with a left rule */
section.starship .ss-status{
  color:#e9f2f7;
  font:700 13px/1.35 Inter,system-ui;
  margin:6px 0 4px;
  padding-left:10px;
  border-left:2px solid rgba(255,255,255,.28);
  white-space:normal;
}

/* remove "pill" visuals if markup still contains .tag */
section.starship .ss-status .tag{
  background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important;
  display:inline; color:inherit; font:inherit;
}
section.starship .ss-site{ color:#dfe6ec; font-weight:600; }
@media (max-width:1024px){
  section.starship .ss-wrap{ grid-template-columns: 1fr; }
  section.starship .ss-num{ font-size:56px; min-width:64px; }
  section.starship .ss-colon{ font-size:42px; transform: translateY(-4px); }
  section.starship .ss-right{ flex-direction:row; }
  section.starship .ss-card{ flex:1 1 0; }
}
@media (max-width:640px){
  section.starship .ss-right{ flex-direction:column; }
  section.starship .ss-num{ font-size:44px; min-width:58px; }
  section.starship .ss-colon{ font-size:36px; transform: translateY(-2px); }
}



/* === Home Gallery (adaptive ratio) === */
.home-gallery{ max-width:1300px; width:100%; margin:36px auto 0; }
.home-gallery .hg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.home-gallery .hg-head h2{ font:800 26px/1.3 Manrope; margin:0; color:#fff; }
.home-gallery .hg-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; align-items:start; }
.home-gallery .hg-card{ position:relative; display:block; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.06); box-shadow:0 10px 32px rgba(0,0,0,.35); }
.home-gallery .hg-img{ display:block; width:100%; height:auto; object-fit:contain; background:#0b0f14; }
.home-gallery .hg-caption{ position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 90%); color:#fff; pointer-events:none; }
.home-gallery .hg-title{ font:800 18px/1.25 Manrope; }
.home-gallery .hg-credit{ font:700 13px/1.2 Inter; color:#dfe6ec; margin-top:4px; }
@media(max-width: 780px){
  .home-gallery .hg-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}


.quick-strip{
  max-width:1300px;
  width:100%;
  margin:32px auto 0;
  display:grid;
  grid-template-columns: 1.2fr 0.7fr 1.1fr;
  grid-template-rows: 70px 90px;
  grid-template-areas:
    "wiki donate donate"
    "wiki quiz   ads";
  gap:18px;
}
.qs-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:block;
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  isolation:isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.qs-card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.4); }

/* --- stripes: each stripe = A+B+C + transparent gap; visible only in masked area --- */
.qs-card::before{
  content:""; position:absolute; inset:0;
  --angle: 32deg;
  --w1: 12px; --w2: 8px; --w3: 6px; --gap: 22px;
  --a: rgba(140, 235, 220, .40);
  --b: rgba(80, 190, 210, .32);
  --c: rgba(255,255,255,.16);
  background:
    repeating-linear-gradient(var(--angle),
      var(--a) 0 calc(var(--w1)),
      var(--b) calc(var(--w1)) calc(var(--w1) + var(--w2)),
      var(--c) calc(var(--w1) + var(--w2)) calc(var(--w1) + var(--w2) + var(--w3)),
      transparent calc(var(--w1) + var(--w2) + var(--w3)) calc(var(--w1) + var(--w2) + var(--w3) + var(--gap))
    );
  /* show only part of the card and fade out smoothly */
  --mask-w: 520px; --mask-h: 260px; --mask-x: 20%; --mask-y: 0%; --fade: 18%;
  -webkit-mask-image: radial-gradient(var(--mask-w) var(--mask-h) at var(--mask-x) var(--mask-y), #000 calc(58% + var(--fade)), transparent 100%);
  mask-image: radial-gradient(var(--mask-w) var(--mask-h) at var(--mask-x) var(--mask-y), #000 calc(58% + var(--fade)), transparent 100%);
  pointer-events:none; z-index:0; mix-blend-mode: overlay;

  /* soften the stripe edges */
  filter: blur(3px);
  -webkit-filter: blur(3px);
  will-change: filter;
}

/* soft readability scrim */
.qs-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.03) 100%);
  pointer-events:none; z-index:0;
}

/* optional faint icons */
.qs-card .qs-icons{
  position:absolute; inset:0; z-index:0; opacity:.10; filter:blur(.2px);
  background-repeat:no-repeat; background-size:140px, 180px, 120px;
  background-position: 8% 70%, 90% 30%, 60% 85%;
}

/* text */
.qs-card .qs-body{ position:relative; z-index:1; padding:16px; display:flex; flex-direction:column; gap:6px; }
.qs-card .qs-title{ font:800 22px/1.25 Manrope,Inter,system-ui; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.qs-card .qs-sub{ font:700 14px/1.3 Inter,system-ui; color:#e9f0f7; text-shadow:0 2px 10px rgba(0,0,0,.65); margin-top:4px; }

/* areas */
.qs-1{ grid-area: wiki; }
.qs-2{ grid-area: donate; }
.qs-3{ grid-area: quiz; }
.qs-4{ grid-area: ads; }

/* per-card tuning */
.qs-1::before{ --angle:28deg; --w1:12px; --w2:7px; --w3:5px; --gap:20px; --a: rgba(140,235,220,.45); --b: rgba(60,180,190,.36); --c: rgba(255,255,255,.18); --mask-w: 400px; --mask-h: 220px; --mask-x: 16%; --mask-y: 10%; --fade: 20%; }
.qs-2::before{ --angle:14deg; --w1:14px; --w2:10px; --w3:6px; --gap:26px; --a: rgba(255,220,120,.50); --b: rgba(255,185,80,.36); --c: rgba(255,255,255,.22); --mask-w: 480px; --mask-h: 220px; --mask-x: 52%; --mask-y: 8%; --fade: 16%; }
.qs-3::before{ --angle:-34deg; --w1:13px; --w2:8px; --w3:5px; --gap:22px; --a: rgba(120,220,255,.48); --b: rgba(70,160,230,.32); --c: rgba(255,255,255,.18); --mask-w: 340px; --mask-h: 200px; --mask-x: 28%; --mask-y: 30%; --fade: 18%; }
.qs-4::before{ --angle:38deg; --w1:12px; --w2:8px; --w3:6px; --gap:22px; --a: rgba(255,220,180,.42); --b: rgba(255,160,120,.34); --c: rgba(255,255,255,.18); --mask-w: 380px; --mask-h: 220px; --mask-x: 86%; --mask-y: 12%; --fade: 22%; }

/* Per-card icons (data-URIs) */
.qs-1 .qs-icons{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M32 4l7 10v8l7 5-7 5v14l-7 9-7-9V32l-7-5 7-5V14z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M32 6l7 14 16 2-12 10 4 16-15-8-15 8 4-16-12-10 16-2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='40' r='6' fill='white'/><rect x='28' y='28' width='22' height='6' fill='white'/><rect x='46' y='16' width='6' height='22' fill='white'/></svg>");
}
.qs-2 .qs-icons{
  background-size: 120px, 160px, 100px;
  background-position: 12% 65%, 88% 25%, 62% 86%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M32 8l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M10 32l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='10' fill='white'/></svg>");
}
.qs-3 .qs-icons{
  background-size: 140px, 140px, 140px;
  background-position: 12% 70%, 80% 30%, 55% 85%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M28 48h8v8h-8zM22 24a10 10 0 1120 0c0 6-6 8-8 10v4h-8v-6c2-4 8-4 8-8a4 4 0 10-8 0h-12z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M28 48h8v8h-8zM22 24a10 10 0 1120 0c0 6-6 8-8 10v4h-8v-6c2-4 8-4 8-8a4 4 0 10-8 0h-12z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M28 48h8v8h-8zM22 24a10 10 0 1120 0c0 6-6 8-8 10v4h-8v-6c2-4 8-4 8-8a4 4 0 10-8 0h-12z'/></svg>");
}
.qs-4 .qs-icons{
  background-size: 120px, 160px, 120px;
  background-position: 10% 75%, 90% 35%, 60% 88%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='50' height='12' x='7' y='10' fill='white'/><rect width='40' height='8' x='12' y='28' fill='white'/><rect width='46' height='10' x='9' y='44' fill='white'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='white' d='M10 32l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='8' fill='white'/></svg>");
}

/* ===== QUICK STRIP — compact x0.5 & quiz subtitle back (2025-09-30) ===== */
.quick-strip{ grid-template-rows: 70px 90px !important; }
.qs-3{ aspect-ratio: auto !important; }
.qs-3 .qs-sub{ display: block !important; }


/* === Quick Strip compact overrides (x0.5) & quiz subtitle visible === */
.qs-3 .qs-sub{ display: block !important; }



/* === Quick‑strip buttons: panel-like dimming + centered text (PATCH) === */
.quick-strip .qs-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,.32);               /* same as .panel */
  border: 1px solid rgba(255,255,255,.08);   /* same as .panel */
  box-shadow: 0 10px 32px rgba(0,0,0,.35);   /* same as .panel */
}
.quick-strip .qs-card .qs-icons{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.quick-strip .qs-card .qs-body{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  padding: 8px 12px;
}
.quick-strip .qs-card .qs-title{
  margin: 0 0 4px 0;
  line-height: 1.1;
}
.quick-strip .qs-card .qs-sub{
  display: block;
  line-height: 1.1;
  opacity: .95;
}




/* === Quick-strip corner arrow (matches launch cards; no tooltip) === */
.quick-strip .qs-card {
  position: relative;
}
.quick-strip .qs-card .qs-corner {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  pointer-events: none; /* не перекрываем клик по ссылке */
  opacity: .9;
}
.quick-strip .qs-card .qs-corner svg {
  width: 20px;
  height: 20px;
  transition: transform .18s ease;
}
.quick-strip .qs-card:hover .qs-corner svg,
.quick-strip .qs-card:focus-visible .qs-corner svg {
  transform: rotate(-20deg);
}



/* === Quick-strip corner arrow — top-right, -45deg base (PATCH v2) === */
.quick-strip .qs-card .qs-corner{
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
}
.quick-strip .qs-card .qs-corner svg{
  transform: rotate(-45deg);
}
.quick-strip .qs-card:hover .qs-corner svg,
.quick-strip .qs-card:focus-visible .qs-corner svg{
  transform: rotate(-65deg);
}



/* === PATCH: Wiki card disabled + bottom tooltip === */
.quick-strip .qs-card[aria-disabled="true"]{
  cursor: not-allowed;
}
.quick-strip .qs-card .qs-tip{
  position:absolute;
  left:50%; bottom:-10px;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,.70);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:6px 10px;
  color:#fff; font:700 13px/1 Inter,system-ui;
  white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  z-index:30;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.quick-strip .qs-card.qs-1:hover .qs-tip,
.quick-strip .qs-card.qs-1:focus-visible .qs-tip{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}



/* === PATCH v9: Wiki tip centered and larger; qs-1 non-clickable === */
/* Centered, larger tooltip for the Wiki card */
.quick-strip .qs-card.qs-1 .qs-tip{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  padding: 10px 14px;
  font: 800 17px/1 Manrope,Inter,system-ui;
  border-radius: 14px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
  z-index: 40;
}
/* show on hover/focus */
.quick-strip .qs-card.qs-1:hover .qs-tip,
.quick-strip .qs-card.qs-1:focus-visible .qs-tip{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,-50%) scale(1);
}



/* === PATCH SS v1: prototypes vertical, side-by-side, 1/4 width === */
.starship .ss-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.starship .ss-right{
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: flex-start;
}
.starship .ss-right .ss-card{
  flex: 0 0 50%;          /* 50% of right half = 25% of full block */
  display: flex;
  flex-direction: column; /* vertical layout inside each card */
  gap: 10px;
  align-items: stretch;
}
.starship .ss-right .ss-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.starship .ss-right .ss-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* === STARSHIP: FORCE row layout + left full-height image (final) === */
section.starship .ss-right{ display:flex !important; flex-direction:row !important; gap:16px !important; align-items:stretch !important; }
section.starship .ss-right .ss-card{ display:flex !important; align-items:stretch !important; flex:1 1 50% !important; min-height:150px !important; }
section.starship .ss-right .ss-img{ height:100% !important; width:auto !important; max-width:48% !important; flex:0 0 auto !important; object-fit:contain !important; object-position:left center !important; border-radius:12px !important; background:#0b0f14; }
section.starship .ss-right .ss-meta{ flex:1 1 auto !important; display:flex !important; flex-direction:column !important; justify-content:center !important; padding-left:12px !important; }
@media (max-width: 1020px){
  section.starship .ss-right{ flex-direction:column !important; }
  section.starship .ss-right .ss-card{ min-height:unset !important; }
  section.starship .ss-right .ss-img{ height:auto !important; width:100% !important; max-width:none !important; }
}



/* === STARSHIP v7: right 3/5, cards 1/2 of right; left full-height image === */
/* columns: left 2/5, right 3/5 */
section.starship .ss-wrap{ grid-template-columns: 2fr 3fr !important; }

/* right area: two cards side-by-side */
section.starship .ss-right{ 
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* card: horizontal layout */
section.starship .ss-right .ss-card{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 180px !important;
  overflow: hidden !important;
}

/* image on the left, full card height; text on the right */
section.starship .ss-right .ss-img{
  flex: 0 0 45% !important;
  width: 45% !important;
  height: 100% !important;
  object-fit: cover !important;           /* заполняем по высоте; срез в основном по бокам */
  object-position: center center !important;
  border-radius: 12px !important;
}
section.starship .ss-right .ss-meta{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-left: 12px !important;
}

@media (max-width: 1020px){
  section.starship .ss-wrap{ grid-template-columns: 1fr !important; }
  section.starship .ss-right{ grid-template-columns: 1fr !important; }
  section.starship .ss-right .ss-card{ min-height: unset !important; }
  section.starship .ss-right .ss-img{ width: 40% !important; height: auto !important; flex-basis: 40% !important; }
}



/* === STARSHIP: Live news button & disable ss-card links === */
section.starship .ss-left{ position: relative; }
section.starship .ss-live-btn{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #fff;
  font: 700 15px/1 Inter,system-ui;
  letter-spacing: .2px;
  background: linear-gradient(135deg, rgba(var(--acc-a),.18), rgba(var(--acc-b),.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
section.starship .ss-live-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(var(--acc-a),.32), rgba(var(--acc-b),.32));
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.32);
}
section.starship .ss-live-btn i{ width:16px; height:16px; }

/* make prototype "buttons" non-clickable just in case */
section.starship .ss-right .ss-card[aria-disabled="true"]{ pointer-events:none; cursor: default; }

/* === STARSHIP live button === */
section.starship .ss-left{ position:relative; }
section.starship .ss-live-btn{
  position:absolute;
  left:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px;
  color:#fff; font:700 15px/1 Inter,system-ui; letter-spacing:.2px;
  background:linear-gradient(135deg, rgba(var(--acc-a),.14), rgba(var(--acc-b),.14));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
section.starship .ss-live-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(var(--acc-a),.28), rgba(var(--acc-b),.28));
  border-color:rgba(255,255,255,.22);
}
section.starship .ss-live-btn i{ width:16px; height:16px; }


/* === QUICK STRIP — stack as equal list on tablets/phones === */
@media (max-width: 1020px){
  .quick-strip{
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: 88px !important;
    grid-template-areas: none !important;
    gap: 12px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .quick-strip .qs-card{
    height: 88px !important;
    min-height: 88px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .quick-strip .qs-body{ padding: 12px 16px !important; }
  .quick-strip .qs-corner{ right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
}
@media (max-width: 640px){
  .quick-strip{ grid-auto-rows: 80px !important; }
  .quick-strip .qs-card{ height: 80px !important; min-height: 80px !important; }
  .quick-strip .qs-title{ font-size: 18px !important; }
  .quick-strip .qs-sub{ font-size: 13px !important; }
}

/* === FIX: Quick Strip — disable grid on mobile/tablet and use a simple vertical list === */
@media (max-width: 1020px){
  .quick-strip{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    /* убиваем сетку начисто */
    grid: unset !important;
    grid-template: none !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-rows: unset !important;
    grid-auto-columns: unset !important;

    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .quick-strip .qs-card{
    width: 100% !important;
    min-height: 88px !important;
    height: 88px !important;
  }
  .quick-strip .qs-card .qs-body{ padding: 12px 16px !important; }
  .quick-strip .qs-card .qs-title{ font-size: 18px !important; }
  .quick-strip .qs-card .qs-sub{ font-size: 13px !important; }
  .quick-strip .qs-card .qs-corner{ right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
}

@media (max-width: 640px){
  .quick-strip .qs-card{ min-height: 80px !important; height: 80px !important; }
}

section.starship{ box-sizing: border-box; }

@media (max-width: 780px){
  section.starship{ padding: 16px; }               /* компактнее на телефонах */
  section.starship .ss-wrap{ grid-template-columns: 1fr !important; }
}

/* === PATCH: компактный таймер без переноса + резиновые карточки Starship === */

/* STARSHIP блок — таймер сжимается, не переносится */
.starship .ss-left{ min-width:0; }
.starship .ss-title{ font-size: clamp(18px, 4.8vw, 28px); }
.starship .ss-timer{
  display:flex;
  align-items:flex-end;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap: clamp(10px, 3.5vw, 22px);
}
.starship .ss-num{
  font: 800 clamp(26px, 11vw, 56px)/1 Manrope,Inter;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  letter-spacing:1px;
}
.starship .ss-colon{
  font: 800 clamp(22px, 9.5vw, 48px)/1 Manrope,Inter;
  transform: translateY(-3px);
}

/* Карточки прототипов: подложка и контент ужимаются под экран */
.starship .ss-wrap{ width:100%; max-width:100%; }
.starship .ss-right{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width:100%;
}
@media (min-width: 540px){
  .starship .ss-right{ grid-template-columns: 1fr 1fr; }
}
.starship .ss-card{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.starship .ss-img{ width:100%; height:auto; display:block; object-fit:cover; }

@media (max-width: 440px) {
    section.starship .ss-num {
        font-size: 34px;
        min-width: 5px;
    }
}

@media (max-width: 350px) {
    section.starship .ss-colon {
        font-size: 24px;
        transform: translateY(-2px);
    }
    section.starship .ss-num {
        font-size: 25px;
        min-width: 5px;
    }
}