*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body.donate-page{
    margin:0;
    min-height:100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:#f5f5f5;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(232,173,77,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(130,70,255,.08),
            transparent 32%
        ),
        #080b0e;
}


/* =========================
   HEADER
   ========================= */

.donate-header{
    min-height:76px;

    padding:0 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    position:sticky;
    top:0;
    z-index:100;

    border-bottom:
        1px solid rgba(232,173,77,.16);

    background:
        rgba(7,9,11,.88);

    backdrop-filter:
        blur(18px);
}

.donate-logo{
    color:#e8ad4d;

    text-decoration:none;

    font-weight:1000;
    font-size:23px;
    letter-spacing:2px;
}

.donate-logo span{
    color:#fff;
}

.donate-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.donate-nav a{
    color:#aaa;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:.2s;
}

.donate-nav a:hover{
    color:#e8ad4d;
}


/* =========================
   MAIN
   ========================= */

.donate-main{
    width:min(1280px, calc(100% - 40px));

    margin:0 auto;

    padding:
        80px 0
        90px;
}


/* =========================
   HERO
   ========================= */

.donate-hero{
    max-width:820px;

    margin:0 auto 48px;

    text-align:center;
}

.donate-kicker{
    display:inline-flex;

    padding:8px 14px;

    margin-bottom:22px;

    border:
        1px solid rgba(232,173,77,.28);

    border-radius:999px;

    background:
        rgba(232,173,77,.06);

    color:#e8ad4d;

    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.donate-hero h1{
    margin:0;

    font-size:
        clamp(
            48px,
            8vw,
            92px
        );

    line-height:.95;

    letter-spacing:-3px;

    background:
        linear-gradient(
            180deg,
            #fff3d6 0%,
            #f5c870 40%,
            #c58528 75%,
            #754515 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    filter:
        drop-shadow(
            0 12px 30px
            rgba(224,149,34,.14)
        );
}

.donate-hero p{
    max-width:650px;

    margin:
        23px auto 0;

    color:#8f9499;

    font-size:16px;
    line-height:1.7;
}

.donate-sandbox,
.donate-return,
.donate-error{
    max-width:680px;

    margin:
        23px auto 0;

    padding:
        12px 16px;

    border-radius:10px;

    font-size:12px;
    font-weight:900;
    letter-spacing:.4px;
}

.donate-sandbox{
    border:
        1px solid rgba(255,193,73,.23);

    background:
        rgba(255,193,73,.07);

    color:#ffc149;
}

.donate-return{
    border:
        1px solid rgba(65,224,137,.23);

    background:
        rgba(65,224,137,.07);

    color:#65e89f;
}

.donate-error{
    border:
        1px solid rgba(255,72,72,.25);

    background:
        rgba(255,72,72,.08);

    color:#ff7777;
}


/* =========================
   PLAYER
   ========================= */

.donate-form{
    width:100%;
}

.donate-player{
    max-width:620px;

    margin:
        0 auto 38px;

    padding:18px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:15px;

    background:
        rgba(255,255,255,.025);
}

.donate-player label{
    display:block;

    margin-bottom:9px;

    color:#d8d8d8;

    font-size:12px;
    font-weight:900;
}

.donate-player input{
    width:100%;

    padding:
        15px 16px;

    border:
        1px solid rgba(232,173,77,.24);

    outline:none;

    border-radius:10px;

    background:#0e1216;

    color:#fff;

    font-size:16px;
    font-weight:800;

    transition:.2s;
}

.donate-player input:focus{
    border-color:
        rgba(232,173,77,.7);

    box-shadow:
        0 0 0 3px
        rgba(232,173,77,.08);
}

.donate-player small{
    display:block;

    margin-top:9px;

    color:#666;

    font-size:11px;
}


/* =========================
   GRID
   ========================= */

.donate-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:14px;
}

.rank-card{
    display:block;

    cursor:pointer;
}

.rank-card > input{
    position:absolute;

    opacity:0;

    pointer-events:none;
}

.rank-card-inner{
    min-height:176px;

    padding:23px 20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.012)
        );

    transition:
        transform .22s,
        border-color .22s,
        box-shadow .22s;
}

.rank-card-inner::before{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    top:-110px;
    left:50%;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        var(--rank-from);

    opacity:.10;

    filter:
        blur(38px);

    pointer-events:none;
}

.rank-card:hover
.rank-card-inner{
    transform:
        translateY(-4px);

    border-color:
        color-mix(
            in srgb,
            var(--rank-from) 38%,
            transparent
        );
}

.rank-card > input:checked
+ .rank-card-inner{
    border-color:
        var(--rank-from);

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--rank-from) 25%,
            transparent
        ),
        0 17px 45px
        rgba(0,0,0,.25);
}

.rank-check{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:absolute;

    top:13px;
    right:13px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:50%;

    background:#0d1115;

    color:transparent;

    font-size:12px;

    transition:.2s;
}

.rank-card > input:checked
+ .rank-card-inner
.rank-check{
    border-color:
        var(--rank-from);

    color:
        var(--rank-from);
}

.rank-name{
    margin-bottom:18px;

    font-size:
        clamp(
            20px,
            2.1vw,
            29px
        );

    font-weight:1000;

    letter-spacing:1.8px;

    background:
        linear-gradient(
            90deg,
            var(--rank-from),
            var(--rank-to)
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.rank-price{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.rank-price strong{
    color:#fff;

    font-size:23px;
}

.rank-price small{
    margin-top:2px;

    color:#60666b;

    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.rank-buy{
    margin-top:15px;

    color:#777;

    font-size:9px;
    font-weight:1000;
    letter-spacing:1.7px;

    transition:.2s;
}

.rank-card > input:checked
+ .rank-card-inner
.rank-buy{
    color:
        var(--rank-from);
}


/* =========================
   SUBMIT
   ========================= */

.donate-submit-wrap{
    margin-top:38px;

    text-align:center;
}

.donate-submit{
    min-width:
        min(
            430px,
            100%
        );

    padding:
        17px 30px;

    border:0;

    border-radius:12px;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #f0ba5c,
            #bc7620
        );

    color:#171007;

    font-size:13px;
    font-weight:1000;
    letter-spacing:1.1px;

    box-shadow:
        0 16px 38px
        rgba(205,133,31,.14);

    transition:.2s;
}

.donate-submit:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 45px
        rgba(205,133,31,.25);
}

.donate-secure{
    margin-top:12px;

    color:#5c6267;

    font-size:10px;
    letter-spacing:.7px;
}


/* =========================
   FOOTER
   ========================= */

.donate-footer{
    padding:
        26px 20px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color:#555;

    text-align:center;

    font-size:11px;
}


/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:900px){

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


@media(max-width:600px){

    .donate-header{
        padding:
            0 17px;
    }

    .donate-nav{
        gap:13px;
    }

    .donate-nav a{
        font-size:11px;
    }

    .donate-main{
        width:
            min(
                100% - 24px,
                1280px
            );

        padding-top:55px;
    }

    .donate-grid{
        grid-template-columns:1fr;
    }

    .rank-card-inner{
        min-height:145px;
    }

    .rank-name{
        font-size:25px;
    }
}
cat >> /var/www/staffland/assets/donate.css <<'CSS'

/* =========================================
   STAFFLAND DONATE — WIDE DESKTOP
   ========================================= */

@media (min-width:1500px){

    .donate-main{
        width:min(1540px, calc(100% - 80px));
    }

    .donate-hero{
        max-width:900px;
        margin-bottom:52px;
    }

    .donate-player{
        max-width:760px;
    }

    .donate-grid{
        grid-template-columns:
            repeat(5, minmax(0,1fr));

        gap:16px;
    }

    .rank-card-inner{
        min-height:190px;
        padding:26px 18px;
    }

    .rank-name{
        font-size:27px;
    }

    .rank-price strong{
        font-size:25px;
    }
}


/* 1200–1499 */

@media (min-width:1100px) and (max-width:1499px){

    .donate-main{
        width:min(1250px, calc(100% - 50px));
    }

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


/* Более заметная выбранная привилегия */

.rank-card > input:checked
+ .rank-card-inner{
    transform:translateY(-4px);

    box-shadow:
        0 0 0 1px var(--rank-from),
        0 0 30px color-mix(
            in srgb,
            var(--rank-from) 15%,
            transparent
        ),
        0 18px 45px rgba(0,0,0,.32);
}


/* Название ранга */

.rank-name{
    text-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--rank-from) 22%,
            transparent
        );
}


/* Цена */

.rank-price strong{
    letter-spacing:.3px;
}


/* Кнопка выбора */

.rank-buy{
    padding:6px 10px;
    border-radius:6px;
}

.rank-card > input:checked
+ .rank-card-inner
.rank-buy{
    background:
        color-mix(
            in srgb,
            var(--rank-from) 8%,
            transparent
        );
}

CSS
/* =========================================
   STAFFLAND DONATE — RANK ICONS
   ========================================= */

.rank-icon-wrap{
    width:86px;
    height:86px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 14px;

    position:relative;
    z-index:1;

    border-radius:18px;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--rank-from) 10%,
                transparent
            ),
            transparent 72%
        );

    transition:
        transform .22s,
        filter .22s;
}

.rank-icon{
    width:82px;
    height:82px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(0,0,0,.32)
        );

    transition:
        transform .22s,
        filter .22s;
}


/* Наведение */

.rank-card:hover
.rank-icon{
    transform:
        scale(1.07);
}


/* Выбранная привилегия */

.rank-card > input:checked
+ .rank-card-inner
.rank-icon{
    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 8px 14px
            rgba(0,0,0,.32)
        )
        drop-shadow(
            0 0 12px
            color-mix(
                in srgb,
                var(--rank-from) 45%,
                transparent
            )
        );
}


/* Карточкам даём место под иконку */

@media (min-width:901px){

    .rank-card-inner{
        min-height:245px;
    }

}


/* Телефон */

@media (max-width:600px){

    .rank-icon-wrap{
        width:78px;
        height:78px;
        margin-bottom:10px;
    }

    .rank-icon{
        width:74px;
        height:74px;
    }

    .rank-card-inner{
        min-height:215px;
    }

}
cat >> /var/www/staffland/assets/donate.css <<'CSS'

/* =========================================
   STAFFLAND DONATE — ICON FOCUSED LAYOUT
   ========================================= */


/* Убираем визуальные карточки */

.rank-card-inner{
    min-height:270px;

    padding:22px 16px;

    border:1px solid transparent !important;
    border-radius:20px;

    background:transparent !important;

    box-shadow:none !important;

    overflow:visible;

    transition:transform .22s;
}


/* Старое свечение самой карточки убираем */

.rank-card-inner::before{
    display:none !important;
}


/* Наведение — слегка поднимаем содержимое */

.rank-card:hover
.rank-card-inner{
    transform:translateY(-5px);

    border-color:transparent !important;

    box-shadow:none !important;
}


/* Выбранный ранг тоже без рамки */

.rank-card > input:checked
+ .rank-card-inner{
    transform:translateY(-5px);

    border-color:transparent !important;

    box-shadow:none !important;
}


/* =========================
   БОЛЬШИЕ ИКОНКИ
   ========================= */

.rank-icon-wrap{
    width:150px;
    height:150px;

    margin:0 auto 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;

    border:0;

    border-radius:24px;

    transition:
        transform .22s,
        filter .22s;
}


.rank-icon{
    width:140px;
    height:140px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 12px 22px
            rgba(0,0,0,.42)
        );

    transition:
        transform .22s,
        filter .22s;
}


/* Наведение */

.rank-card:hover
.rank-icon{
    transform:scale(1.08);

    filter:
        drop-shadow(
            0 14px 24px
            rgba(0,0,0,.45)
        )
        drop-shadow(
            0 0 12px
            color-mix(
                in srgb,
                var(--rank-from) 22%,
                transparent
            )
        );
}


/* Выбранная привилегия */

.rank-card > input:checked
+ .rank-card-inner
.rank-icon{
    transform:scale(1.10);

    filter:
        drop-shadow(
            0 14px 24px
            rgba(0,0,0,.45)
        )
        drop-shadow(
            0 0 18px
            color-mix(
                in srgb,
                var(--rank-from) 55%,
                transparent
            )
        );
}


/* Название */

.rank-name{
    margin-bottom:12px;

    font-size:26px;

    transition:
        transform .22s,
        filter .22s;
}


.rank-card > input:checked
+ .rank-card-inner
.rank-name{
    transform:scale(1.05);

    filter:
        drop-shadow(
            0 0 10px
            color-mix(
                in srgb,
                var(--rank-from) 45%,
                transparent
            )
        );
}


/* Цена чуть крупнее */

.rank-price strong{
    font-size:25px;
}


/* Галочка выбора возле иконки */

.rank-check{
    top:12px;
    right:calc(50% - 83px);

    background:#090d10;

    z-index:5;
}


/* ВЫБРАТЬ */

.rank-buy{
    margin-top:13px;
}


/* Немного больше расстояния между рангами */

.donate-grid{
    row-gap:24px;
    column-gap:18px;
}


/* Телефон */

@media(max-width:600px){

    .rank-card-inner{
        min-height:240px;
        padding:16px 10px;
    }

    .rank-icon-wrap{
        width:125px;
        height:125px;
    }

    .rank-icon{
        width:118px;
        height:118px;
    }

    .rank-name{
        font-size:24px;
    }

    .rank-check{
        right:calc(50% - 70px);
    }
}

CSS
/* =====================================
   STAFFLAND DONATE — ICON GRID REWORK
   Добавить в конец donate.css
   ===================================== */

/* Сетка привилегий */
.ranks-grid,
.rank-grid,
.donate-ranks,
.donate-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 28px 26px;
    align-items: start;
    margin-top: 34px;
}

/* Мобильнее / уже */
@media (max-width: 1600px) {
    .ranks-grid,
    .rank-grid,
    .donate-ranks,
    .donate-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .ranks-grid,
    .rank-grid,
    .donate-ranks,
    .donate-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 860px) {
    .ranks-grid,
    .rank-grid,
    .donate-ranks,
    .donate-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
        gap: 24px 18px;
    }
}

@media (max-width: 560px) {
    .ranks-grid,
    .rank-grid,
    .donate-ranks,
    .donate-grid {
        grid-template-columns: 1fr;
    }
}

/* Корневая обертка одной привилегии */
.rank-card {
    position: relative;
    display: block;
    cursor: pointer;
    user-select: none;
    text-align: center;
    min-height: auto;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    transition: transform .18s ease;
}

.rank-card:hover {
    transform: translateY(-3px);
}

/* Скрываем radio, но не ломаем выбор */
.rank-card > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Внутренность карточки */
.rank-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 300px;
    padding: 14px 10px 8px;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Убираем старую рамку/фон у выбранного */
.rank-card > input[type="radio"]:checked + .rank-card-inner,
.rank-card.is-selected .rank-card-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Галочка выбранного */
.rank-check {
    position: absolute;
    top: 4px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    border-radius: 999px;

    background: rgba(8, 12, 18, 0.86);
    border: 1px solid rgba(255, 210, 90, 0.55);
    color: #ffd86b;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 0 0 rgba(255, 216, 107, 0);
    z-index: 3;
}

.rank-card > input[type="radio"]:checked + .rank-card-inner .rank-check,
.rank-card.is-selected .rank-check {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 16px rgba(255, 216, 107, 0.35);
}

/* Иконка */
.rank-icon-wrap {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.rank-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    filter:
        drop-shadow(0 0 14px rgba(255, 196, 66, 0.08))
        drop-shadow(0 0 26px rgba(80, 140, 255, 0.06));

    transition:
        transform .22s ease,
        filter .22s ease,
        opacity .22s ease;
    opacity: .96;
}

/* Hover и selected поведение */
.rank-card:hover .rank-icon {
    transform: translateY(-2px) scale(1.03);
    opacity: 1;
}

.rank-card > input[type="radio"]:checked + .rank-card-inner .rank-icon,
.rank-card.is-selected .rank-icon {
    transform: scale(1.08);
    filter:
        drop-shadow(0 0 18px rgba(255, 210, 90, 0.18))
        drop-shadow(0 0 38px rgba(255, 210, 90, 0.18))
        drop-shadow(0 0 64px rgba(255, 210, 90, 0.12));
    opacity: 1;
}

/* Название */
.rank-name {
    display: block;
    margin: 2px 0 8px;
    text-align: center;

    font-size: 18px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Цена */
.rank-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.rank-price strong {
    display: block;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255,255,255,.08);
}

.rank-price small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(220, 228, 238, 0.44);
}

/* Кнопка "выбрать" */
.rank-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 74px;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;

    background: rgba(255, 205, 80, 0.08);
    border: 1px solid rgba(255, 205, 80, 0.12);
    color: rgba(255, 225, 120, 0.92);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.rank-card:hover .rank-buy {
    background: rgba(255, 205, 80, 0.12);
    border-color: rgba(255, 205, 80, 0.24);
    transform: translateY(-1px);
}

.rank-card > input[type="radio"]:checked + .rank-card-inner .rank-buy,
.rank-card.is-selected .rank-buy {
    background: linear-gradient(
        180deg,
        rgba(255, 217, 108, 0.22) 0%,
        rgba(255, 196, 66, 0.14) 100%
    );
    border-color: rgba(255, 217, 108, 0.34);
    box-shadow: 0 0 22px rgba(255, 205, 80, 0.10);
}

/* Полностью убираем любые остатки карточных декоративных слоев */
.rank-card::before,
.rank-card::after,
.rank-card-inner::before,
.rank-card-inner::after {
    box-shadow: none !important;
}

/* Если старые стили рисуют лишние круги/углы — прячем их */
.rank-card .radio-circle,
.rank-card .rank-radio,
.rank-card .rank-dot,
.rank-card .rank-select-circle {
    display: none !important;
}

/* Чуть компактнее блок на странице */
@media (min-width: 1400px) {
    .rank-card-inner {
        min-height: 286px;
    }

    .rank-icon-wrap {
        width: 176px;
        height: 176px;
    }
}

/* Мобильный размер */
@media (max-width: 860px) {
    .rank-card-inner {
        min-height: 255px;
        padding-top: 8px;
    }

    .rank-icon-wrap {
        width: 140px;
        height: 140px;
        margin-bottom: 12px;
    }

    .rank-name {
        font-size: 16px;
    }

    .rank-price strong {
        font-size: 18px;
    }
}
/* =====================================
   STAFFLAND DONATE — ICON SIZE BALANCE
   ===================================== */

/* Базовое поведение иконок */
.rank-icon{
    display:block;
    margin:0 auto;
    transform-origin:center center;
    transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

/* Немного усиливаем выбранный ранг */
.rank-card > input[type="radio"]:checked + .rank-card-inner .rank-icon{
    filter:
        drop-shadow(0 0 16px rgba(255, 205, 80, 0.20))
        drop-shadow(0 0 26px rgba(255, 205, 80, 0.14));
}

/* Индивидуальное выравнивание визуального размера по SKU */
.rank-card > input[value="rank_ember"] + .rank-card-inner .rank-icon    { transform: scale(1.16); }
.rank-card > input[value="rank_rune"] + .rank-card-inner .rank-icon     { transform: scale(1.12); }
.rank-card > input[value="rank_onyx"] + .rank-card-inner .rank-icon     { transform: scale(1.08); }
.rank-card > input[value="rank_valor"] + .rank-card-inner .rank-icon    { transform: scale(1.05); }
.rank-card > input[value="rank_samana"] + .rank-card-inner .rank-icon   { transform: scale(1.10); }

.rank-card > input[value="rank_eclipse"] + .rank-card-inner .rank-icon  { transform: scale(0.96); }
.rank-card > input[value="rank_nomary"] + .rank-card-inner .rank-icon   { transform: scale(0.98); }
.rank-card > input[value="rank_vacula"] + .rank-card-inner .rank-icon   { transform: scale(0.96); }
.rank-card > input[value="rank_remota"] + .rank-card-inner .rank-icon   { transform: scale(0.95); }
.rank-card > input[value="rank_gordano"] + .rank-card-inner .rank-icon  { transform: scale(0.91); }

.rank-card > input[value="rank_volacky"] + .rank-card-inner .rank-icon  { transform: scale(0.88); }
.rank-card > input[value="rank_votary"] + .rank-card-inner .rank-icon   { transform: scale(0.92); }
.rank-card > input[value="rank_atoman"] + .rank-card-inner .rank-icon   { transform: scale(0.97); }
.rank-card > input[value="rank_nexus"] + .rank-card-inner .rank-icon    { transform: scale(1.00); }
.rank-card > input[value="rank_immortal"] + .rank-card-inner .rank-icon { transform: scale(0.94); }

/* Чтобы выбранный элемент чуть приятнее ощущался */
.rank-card > input[type="radio"]:checked + .rank-card-inner .rank-name{
    text-shadow: 0 0 14px currentColor;
}
cat >> /var/www/staffland/assets/donate.css <<'CSS'

/* =====================================
   STAFFLAND DONATE — RANK TYPOGRAPHY
   ===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&display=swap');

.rank-name{
    font-family:
        "Cinzel",
        Georgia,
        "Times New Roman",
        serif;

    font-size:19px;
    font-weight:900;

    letter-spacing:.10em;

    line-height:1.05;

    text-transform:uppercase;

    /* ГРАДИЕНТ НЕ ТРОГАЕМ */
    background:
        linear-gradient(
            90deg,
            var(--rank-from),
            var(--rank-to)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;

    text-shadow:none;
}

/* Выбранный ранг */
.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-name{
    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--rank-from) 38%,
                transparent
            )
        );
}

CSS
/* =====================================
   STAFFLAND DONATE — SELECTED RANK
   ===================================== */


/* Кнопка: текст задаём через CSS */

.rank-buy{
    font-size:0;
}

.rank-buy::before{
    content:"ВЫБРАТЬ";

    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;

    color:inherit;
}


/* Выбранная привилегия */

.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-buy::before{
    content:"ВЫБРАНО ✓";
}


/* Кнопка выбранного ранга */

.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-buy{
    min-width:104px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--rank-from) 22%,
                rgba(18,18,15,.9)
            ),
            rgba(18,18,15,.9)
        );

    border-color:
        color-mix(
            in srgb,
            var(--rank-from) 45%,
            transparent
        );

    color:var(--rank-from);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--rank-from) 16%,
            transparent
        );
}


/* Усиливаем свечение выбранной иконки
   transform НЕ трогаем — индивидуальные размеры сохраняются */

.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-icon{
    filter:
        drop-shadow(
            0 8px 16px
            rgba(0,0,0,.38)
        )
        drop-shadow(
            0 0 13px
            color-mix(
                in srgb,
                var(--rank-from) 55%,
                transparent
            )
        )
        drop-shadow(
            0 0 28px
            color-mix(
                in srgb,
                var(--rank-to) 25%,
                transparent
            )
        );
}


/* Название выбранного ранга */

.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-name{
    filter:
        drop-shadow(
            0 0 7px
            color-mix(
                in srgb,
                var(--rank-from) 45%,
                transparent
            )
        );
}


/* Галочка рядом с артефактом */

.rank-check{
    top:5px;
    right:calc(50% - 94px);

    width:25px;
    height:25px;

    opacity:0;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--rank-from) 55%,
            transparent
        );

    background:rgba(6,9,11,.92);

    color:var(--rank-from);

    box-shadow:none;
}

.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-check{
    opacity:1;

    box-shadow:
        0 0 15px
        color-mix(
            in srgb,
            var(--rank-from) 32%,
            transparent
        );
}


/* =====================================
   STAFFLAND DONATE — BUY TEXT FIX
   ===================================== */

.rank-buy{
    font-size:10px !important;
}

.rank-buy::before,
.rank-buy::after{
    content:none !important;
    display:none !important;
}


/* =====================================
   STAFFLAND DONATE — COMPACT ICON GLOW
   ===================================== */

/* Обычное наведение */
.rank-card:hover .rank-icon{
    filter:
        drop-shadow(
            0 6px 12px
            rgba(0,0,0,.35)
        )
        drop-shadow(
            0 0 7px
            color-mix(
                in srgb,
                var(--rank-from) 22%,
                transparent
            )
        );
}

/* Выбранная привилегия */
.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-icon{
    filter:
        drop-shadow(
            0 7px 12px
            rgba(0,0,0,.38)
        )
        drop-shadow(
            0 0 7px
            color-mix(
                in srgb,
                var(--rank-from) 45%,
                transparent
            )
        )
        drop-shadow(
            0 0 13px
            color-mix(
                in srgb,
                var(--rank-to) 18%,
                transparent
            )
        );
}

/* Название тоже светится аккуратнее */
.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-name{
    filter:
        drop-shadow(
            0 0 4px
            color-mix(
                in srgb,
                var(--rank-from) 32%,
                transparent
            )
        );
}

/* Галочка без большого ореола */
.rank-card > input[type="radio"]:checked
+ .rank-card-inner
.rank-check{
    box-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--rank-from) 24%,
            transparent
        );
}


/* =====================================
   STAFFLAND DONATE — CHOICE SUMMARY
   ===================================== */

.donate-choice-summary{
    --choice-from:#f0ba5c;
    --choice-to:#bc7620;

    width:min(520px, 100%);

    margin:
        54px auto
        18px;

    padding:
        15px 22px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:9px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--choice-from) 25%,
            transparent
        );

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--choice-from) 5%,
                rgba(12,15,18,.92)
            ),
            rgba(10,13,16,.92)
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.18);

    text-align:center;
}

.donate-choice-label{
    color:#70767c;

    font-size:10px;
    font-weight:900;

    letter-spacing:.15em;
}

#donateChoiceName{
    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:17px;
    font-weight:900;

    letter-spacing:.08em;

    background:
        linear-gradient(
            90deg,
            var(--choice-from),
            var(--choice-to)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;
}

.donate-choice-separator{
    color:#474d52;
}

.donate-choice-price{
    color:#fff;

    font-size:18px;
    font-weight:1000;
}

.donate-submit-wrap{
    margin-top:0;
}

@media(max-width:600px){

    .donate-choice-summary{
        margin-top:38px;

        padding:
            14px 16px;
    }

}

/* =====================================
   STAFFLAND DONATE — PAYMENT BUTTON
   ===================================== */

.donate-submit-wrap{
    width:min(520px, 100%);
    margin:0 auto;
    text-align:center;
}

.donate-submit{
    width:100%;
    min-height:58px;

    padding:17px 28px;

    border:
        1px solid
        rgba(255,219,132,.28);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #f5c86f 0%,
            #d99a3b 48%,
            #b96d1d 100%
        );

    color:#171006;

    font-size:13px;
    font-weight:1000;

    letter-spacing:.11em;

    cursor:pointer;

    box-shadow:
        0 12px 28px
        rgba(196,118,25,.14),
        inset 0 1px 0
        rgba(255,255,255,.22);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.donate-submit:hover{
    transform:translateY(-2px);

    filter:brightness(1.05);

    box-shadow:
        0 16px 35px
        rgba(211,134,37,.24),
        0 0 22px
        rgba(232,173,77,.10),
        inset 0 1px 0
        rgba(255,255,255,.25);
}

.donate-submit:active{
    transform:translateY(0);
}

.donate-submit:focus-visible{
    outline:
        2px solid
        rgba(245,200,111,.85);

    outline-offset:3px;
}

.donate-secure{
    margin-top:12px;

    color:#60666b;

    font-size:10px;
    font-weight:700;

    letter-spacing:.07em;
}

.donate-secure::before{
    content:"◆";
    display:inline-block;

    margin-right:7px;

    color:#b78338;

    font-size:7px;

    vertical-align:1px;
}


/* =====================================
   STAFFLAND DONATE — LOCAL CURRENCIES
   ===================================== */

.rank-price-local{
    display:block;

    margin-top:5px;

    color:#737b83;

    font-size:10px;
    font-weight:800;

    letter-spacing:.035em;

    white-space:nowrap;
}

.rank-price-local span{
    margin:0 4px;

    color:#42494f;
}

.rank-price small{
    margin-top:3px;
}


/* =====================================
   STAFFLAND DONATE — SUMMARY CURRENCIES
   ===================================== */

.donate-choice-local{
    flex-basis:100%;

    display:block;

    margin-top:2px;

    color:#727a82;

    font-size:10px;
    font-weight:800;

    letter-spacing:.045em;

    text-align:center;
}


/* =====================================
   STAFFLAND DONATE — PURCHASE CONFIRM
   ===================================== */

body.donate-modal-open{
    overflow:hidden;
}

.donate-confirm{
    --confirm-from:#f0ba5c;
    --confirm-to:#bc7620;

    position:fixed;
    inset:0;

    z-index:5000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.donate-confirm.is-open{
    opacity:1;
    visibility:visible;
}

.donate-confirm-backdrop{
    position:absolute;
    inset:0;

    background:
        rgba(3,5,7,.78);

    backdrop-filter:
        blur(10px);
}

.donate-confirm-dialog{
    width:min(510px,100%);

    position:relative;
    z-index:1;

    padding:34px;

    overflow:hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--confirm-from) 30%,
            rgba(255,255,255,.06)
        );

    border-radius:18px;

    background:
        radial-gradient(
            circle at 50% 0%,
            color-mix(
                in srgb,
                var(--confirm-from) 8%,
                transparent
            ),
            transparent 45%
        ),
        #0c1014;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.55);

    transform:
        translateY(10px)
        scale(.98);

    transition:
        transform .18s ease;
}

.donate-confirm.is-open
.donate-confirm-dialog{
    transform:
        translateY(0)
        scale(1);
}

.donate-confirm-x{
    width:34px;
    height:34px;

    position:absolute;
    top:14px;
    right:14px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:#777;

    cursor:pointer;

    font-size:21px;
    line-height:1;

    transition:.18s;
}

.donate-confirm-x:hover{
    color:#fff;

    border-color:
        rgba(255,255,255,.18);
}

.donate-confirm-kicker{
    margin-bottom:12px;

    color:
        var(--confirm-from);

    font-size:9px;
    font-weight:900;

    letter-spacing:.18em;
}

.donate-confirm h2{
    margin:0 0 27px;

    color:#fff;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:25px;
    font-weight:900;

    letter-spacing:.035em;
}

.donate-confirm-details{
    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:12px;

    background:
        rgba(255,255,255,.018);
}

.donate-confirm-row{
    min-height:57px;

    padding:
        0 17px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}

.donate-confirm-row:last-child{
    border-bottom:0;
}

.donate-confirm-row span{
    color:#737a80;

    font-size:11px;
    font-weight:700;
}

.donate-confirm-row strong{
    color:#fff;

    font-size:14px;
    font-weight:900;
}

#confirmRank{
    font-family:
        "Cinzel",
        Georgia,
        serif;

    background:
        linear-gradient(
            90deg,
            var(--confirm-from),
            var(--confirm-to)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;
}

.donate-confirm-player{
    color:
        var(--confirm-from)
        !important;
}

.donate-confirm-warning{
    margin-top:17px;

    padding:12px 14px;

    border:
        1px solid
        rgba(255,193,73,.12);

    border-radius:9px;

    background:
        rgba(255,193,73,.035);

    color:#8b8f91;

    font-size:11px;
    line-height:1.55;
}

.donate-confirm-actions{
    margin-top:23px;

    display:grid;

    grid-template-columns:
        .75fr 1.6fr;

    gap:10px;
}

.donate-confirm-back,
.donate-confirm-pay{
    min-height:50px;

    border-radius:10px;

    cursor:pointer;

    font-size:10px;
    font-weight:1000;

    letter-spacing:.08em;

    transition:
        transform .18s,
        filter .18s,
        border-color .18s;
}

.donate-confirm-back{
    border:
        1px solid
        rgba(255,255,255,.09);

    background:#11161a;

    color:#888;
}

.donate-confirm-back:hover{
    border-color:
        rgba(255,255,255,.18);

    color:#ddd;
}

.donate-confirm-pay{
    border:
        1px solid
        color-mix(
            in srgb,
            var(--confirm-from) 35%,
            transparent
        );

    background:
        linear-gradient(
            135deg,
            #f5c86f,
            #d99a3b 48%,
            #b96d1d
        );

    color:#171006;

    box-shadow:
        0 12px 25px
        rgba(196,118,25,.13);
}

.donate-confirm-pay:hover{
    transform:
        translateY(-1px);

    filter:
        brightness(1.05);
}

@media(max-width:560px){

    .donate-confirm-dialog{
        padding:
            28px 19px 20px;
    }

    .donate-confirm h2{
        font-size:20px;
    }

    .donate-confirm-actions{
        grid-template-columns:1fr;
    }

    .donate-confirm-row{
        padding:
            0 13px;
    }
}


/* =====================================
   STAFFLAND DONATE — PAYMENT RETURN
   ===================================== */

.donate-return{
    max-width:660px;

    margin:24px auto 0;

    padding:16px 18px;

    display:flex;
    align-items:center;

    gap:14px;

    text-align:left;

    border:
        1px solid
        rgba(83,220,145,.20);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(60,200,125,.07),
            rgba(255,255,255,.018)
        );

    color:inherit;
}

.donate-return-icon{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(87,230,153,.30);

    border-radius:50%;

    background:
        rgba(87,230,153,.07);

    color:#65e89f;

    font-size:15px;
    font-weight:1000;

    box-shadow:
        0 0 14px
        rgba(87,230,153,.08);
}

.donate-return-content{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.donate-return-content strong{
    color:#73e9a7;

    font-size:11px;
    font-weight:1000;

    letter-spacing:.10em;
}

.donate-return-content span{
    color:#8d959b;

    font-size:11px;
    line-height:1.55;
}

@media(max-width:600px){

    .donate-return{
        align-items:flex-start;
        padding:14px;
    }

}


/* =========================================
   STAFFLAND DONATE — STAFFCOIN
   ========================================= */

.staffcoin-section{
    margin-top:78px;
    padding-top:54px;

    border-top:
        1px solid rgba(255,255,255,.065);
}


.staffcoin-heading{
    max-width:720px;

    margin:
        0 auto 38px;

    text-align:center;
}


.staffcoin-heading-kicker{
    margin-bottom:10px;

    color:#d99a3b;

    font-size:9px;
    font-weight:1000;

    letter-spacing:.22em;
}


.staffcoin-heading h2{
    margin:0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(
            31px,
            4vw,
            48px
        );

    font-weight:900;

    letter-spacing:.07em;

    background:
        linear-gradient(
            90deg,
            #ffe19a,
            #f3b24b 50%,
            #d87819
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    text-shadow:
        0 0 32px
        rgba(232,154,45,.10);
}


.staffcoin-heading p{
    max-width:560px;

    margin:
        13px auto 0;

    color:#70777c;

    font-size:12px;
    line-height:1.65;
}


/* Шесть пакетов в один ряд на широком экране */

.staffcoin-grid{
    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        ) !important;

    gap:18px !important;
}


.staffcoin-card-inner{
    min-height:260px;
}


/* STAFFCOIN ICON */

.staffcoin-icon-wrap{
    width:105px;
    height:105px;

    margin-bottom:15px;
}


.staffcoin-coin{
    width:86px;
    height:86px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    border:
        2px solid
        rgba(255,214,125,.82);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #ffe59a,
            #efa93f 38%,
            #b86216 73%,
            #6e320b
        );

    box-shadow:
        inset 0 0 0 5px
        rgba(88,37,7,.20),

        inset 0 0 18px
        rgba(255,240,175,.18),

        0 10px 22px
        rgba(0,0,0,.35),

        0 0 24px
        rgba(232,151,45,.13);

    transform:
        rotate(-7deg);

    transition:
        transform .22s,
        filter .22s;
}


.staffcoin-coin::before{
    content:"";

    position:absolute;
    inset:7px;

    border:
        1px solid
        rgba(111,50,11,.38);

    border-radius:50%;
}


.staffcoin-coin span{
    position:relative;
    z-index:1;

    color:#6b310b;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:24px;
    font-weight:1000;

    letter-spacing:-1px;

    text-shadow:
        0 1px 0
        rgba(255,237,170,.55);
}


.staffcoin-card:hover
.staffcoin-coin{
    transform:
        rotate(0deg)
        scale(1.07);
}


.staffcoin-card > input:checked
+ .staffcoin-card-inner
.staffcoin-coin{
    transform:
        rotate(0deg)
        scale(1.09);

    filter:
        brightness(1.08);
}


.staffcoin-name{
    margin-bottom:14px;

    font-size:
        clamp(
            16px,
            1.4vw,
            21px
        );

    letter-spacing:.7px;

    text-align:center;
}


/* RESPONSIVE STAFFCOIN */

@media(max-width:1500px){

    .staffcoin-grid{
        grid-template-columns:
            repeat(
                3,
                minmax(180px,1fr)
            ) !important;
    }

}


@media(max-width:800px){

    .staffcoin-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

}


@media(max-width:600px){

    .staffcoin-section{
        margin-top:55px;
        padding-top:42px;
    }

    .staffcoin-grid{
        grid-template-columns:
            1fr !important;
    }

    .staffcoin-card-inner{
        min-height:245px;
    }

    .staffcoin-name{
        font-size:22px;
    }

}




/* =========================================
   STAFFLAND STORE — CATALOG SWITCH
   ========================================= */

html{
    scroll-behavior:smooth;
}

#privileges,
#staffcoin{
    scroll-margin-top:105px;
}

.donate-catalog-switch{
    width:min(520px, 100%);

    margin:
        -18px auto
        38px;

    padding:5px;

    display:grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:5px;

    border:
        1px solid
        rgba(232,173,77,.18);

    border-radius:13px;

    background:
        rgba(12,15,17,.88);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.20);

    backdrop-filter:
        blur(12px);
}

.donate-catalog-tab{
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 20px;

    border:
        1px solid
        transparent;

    border-radius:9px;

    color:#7f858b;

    text-decoration:none;

    font-size:11px;
    font-weight:950;

    letter-spacing:
        1.1px;

    transition:
        background .2s,
        color .2s,
        border-color .2s,
        box-shadow .2s,
        transform .2s,
        filter .2s;
}

.donate-catalog-tab:hover{
    color:#efbc65;

    background:
        rgba(239,188,101,.055);
}

.donate-catalog-tab.is-active{
    color:#17100a;

    border-color:
        rgba(255,211,124,.55);

    background:
        linear-gradient(
            135deg,
            #f2c66f,
            #cd8326
        );

    box-shadow:
        0 5px 18px
        rgba(205,131,38,.18),
        inset 0 1px 0
        rgba(255,255,255,.22);

    filter:
        brightness(1.04);
}

.donate-catalog-tab.is-active:hover{
    color:#17100a;

    transform:
        translateY(-1px);

    filter:
        brightness(1.09);
}

@media(max-width:600px){

    .donate-catalog-switch{
        width:100%;

        margin:
            -10px auto
            28px;

        padding:4px;
    }

    .donate-catalog-tab{
        min-height:42px;

        padding:
            0 10px;

        font-size:10px;

        letter-spacing:.7px;
    }

    #privileges,
    #staffcoin{
        scroll-margin-top:85px;
    }
}

/* /STAFFLAND STORE — CATALOG SWITCH */



/* =========================================
   STAFFLAND STORE — STICKY CATALOG SWITCH
   ========================================= */

.donate-catalog-switch{
    position:sticky;
    top:76px;
    z-index:80;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 10px 35px rgba(0,0,0,.34),
        0 0 0 1px rgba(232,173,77,.035);
}


/* Небольшая тёмная подложка,
   чтобы товары не просвечивали при прокрутке */

.donate-catalog-switch::before{
    content:"";

    position:absolute;
    inset:-10px -14px;

    z-index:-1;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(7,10,12,.96),
            rgba(7,10,12,.88)
        );

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);

    pointer-events:none;
}


@media(max-width:600px){

    .donate-catalog-switch{
        top:68px;
        z-index:80;
    }

    .donate-catalog-switch::before{
        inset:-7px -7px;
        border-radius:15px;
    }

}

/* /STAFFLAND STORE — STICKY CATALOG SWITCH */



/* =========================================
   STAFFLAND STAFFCOIN — BENEFIT BADGE
   ========================================= */

.staffcoin-card-inner{
    position:relative;
}

.staffcoin-benefit{
    position:absolute;
    top:12px;
    left:12px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:24px;
    padding:0 9px;

    border:
        1px solid
        rgba(112,220,138,.28);

    border-radius:999px;

    background:
        rgba(50,155,82,.10);

    color:#78e396;

    font-size:9px;
    font-weight:950;
    letter-spacing:.8px;

    line-height:1;
    white-space:nowrap;

    box-shadow:
        0 0 15px
        rgba(70,190,105,.08);

    z-index:6;
}

.staffcoin-card:hover
.staffcoin-benefit{
    border-color:
        rgba(112,220,138,.42);

    background:
        rgba(50,155,82,.14);
}

@media(max-width:600px){

    .staffcoin-benefit{
        top:10px;
        left:10px;

        min-height:22px;
        padding:0 8px;

        font-size:8px;
    }

}

/* /STAFFLAND STAFFCOIN — BENEFIT BADGE */



/* =========================================
   STAFFCOIN BENEFIT — BELOW PRICE
   ========================================= */

.staffcoin-benefit{
    position:static;
    top:auto;
    left:auto;

    width:max-content;

    margin:8px auto 3px;

    min-height:22px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(112,220,138,.30);

    border-radius:999px;

    background:
        rgba(50,155,82,.10);

    color:#78e396;

    font-size:9px;
    font-weight:950;
    letter-spacing:.8px;

    line-height:1;
    white-space:nowrap;

    box-shadow:
        0 0 14px
        rgba(70,190,105,.08);
}

@media(max-width:600px){

    .staffcoin-benefit{
        position:static;
        margin:7px auto 3px;
        min-height:21px;
    }

}

/* /STAFFCOIN BENEFIT — BELOW PRICE */



/* =========================================
   STAFFCOIN BENEFIT PLACEHOLDER
   ========================================= */

.staffcoin-benefit-placeholder{
    visibility:hidden;
    pointer-events:none;
}

/* /STAFFCOIN BENEFIT PLACEHOLDER */



/* =========================================
   STAFFCOIN SPECIAL PACKAGE BADGES
   ========================================= */

.staffcoin-card-inner{
    position:relative;
}

.staffcoin-special-badge{
    position:absolute;

    top:-10px;
    left:50%;

    transform:
        translateX(-50%);

    z-index:8;

    min-height:24px;

    padding:
        0 11px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border-radius:999px;

    font-size:8px;
    font-weight:950;

    line-height:1;

    letter-spacing:
        1px;

    white-space:nowrap;

    pointer-events:none;
}


/* ПОПУЛЯРНЫЙ */

.staffcoin-popular{
    color:#1a1107;

    border:
        1px solid
        rgba(255,220,145,.70);

    background:
        linear-gradient(
            135deg,
            #ffd978,
            #db9229
        );

    box-shadow:
        0 0 18px
        rgba(239,188,101,.22);
}


/* МАКСИМАЛЬНАЯ ВЫГОДА */

.staffcoin-best{
    color:#102015;

    border:
        1px solid
        rgba(118,232,151,.50);

    background:
        linear-gradient(
            135deg,
            #91efa9,
            #4fbf73
        );

    box-shadow:
        0 0 19px
        rgba(79,191,115,.22);
}


@media(max-width:600px){

    .staffcoin-special-badge{
        top:-7px;

        min-height:22px;

        padding:
            0 9px;

        font-size:7px;
    }

}

/* /STAFFCOIN SPECIAL PACKAGE BADGES */


/* =========================================
   STAFFCOIN SPECIAL BADGES — CLIP FIX
   ========================================= */

.staffcoin-card,
.staffcoin-card-inner{
    overflow:visible !important;
}

.staffcoin-special-badge{
    top:-22px;
}

@media(max-width:600px){

    .staffcoin-special-badge{
        top:-16px;
    }

}

/* /STAFFCOIN SPECIAL BADGES — CLIP FIX */



/* =========================================
   STAFFLAND DONATE CASE KEYS
   ========================================= */

.casekey-section{
    margin-top:78px;
    padding-top:54px;

    border-top:
        1px solid rgba(255,255,255,.065);
}

.casekey-heading{
    max-width:720px;

    margin:
        0 auto 38px;

    text-align:center;
}

.casekey-heading-kicker{
    margin-bottom:10px;

    color:#b979ff;

    font-size:9px;
    font-weight:1000;

    letter-spacing:.22em;
}

.casekey-heading h2{
    margin:0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(
            31px,
            4vw,
            48px
        );

    font-weight:900;

    letter-spacing:.07em;

    background:
        linear-gradient(
            90deg,
            #e8b2ff,
            #b868ff 48%,
            #7132ff
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    text-shadow:
        0 0 32px
        rgba(154,76,255,.12);
}

.casekey-heading p{
    max-width:580px;

    margin:
        13px auto 0;

    color:#70777c;

    font-size:12px;
    line-height:1.65;
}

.casekey-grid{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

    gap:20px !important;
}

.casekey-card,
.casekey-card-inner{
    overflow:visible !important;
}

.casekey-card-inner{
    min-height:285px;
    position:relative;
}

.casekey-icon-wrap{
    width:150px;
    height:130px;

    margin-bottom:14px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.casekey-icon{
    width:145px;
    height:125px;

    object-fit:contain;

    display:block;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(0,0,0,.38)
        )
        drop-shadow(
            0 0 15px
            rgba(137,61,255,.16)
        );

    transition:
        transform .22s ease,
        filter .22s ease;
}

.casekey-card:hover
.casekey-icon{
    transform:
        translateY(-4px)
        scale(1.06);

    filter:
        drop-shadow(
            0 14px 23px
            rgba(0,0,0,.42)
        )
        drop-shadow(
            0 0 22px
            rgba(160,76,255,.28)
        );
}

.casekey-card > input:checked
+ .casekey-card-inner
.casekey-icon{
    transform:
        translateY(-3px)
        scale(1.07);
}

.casekey-name{
    margin-bottom:14px;

    text-align:center;

    font-size:
        clamp(
            17px,
            1.5vw,
            22px
        );

    letter-spacing:.7px;
}

.casekey-special-badge{
    position:absolute;

    top:-22px;
    left:50%;

    transform:
        translateX(-50%);

    z-index:8;

    min-height:24px;

    padding:
        0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(214,167,255,.55);

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #d595ff,
            #8a43e9
        );

    color:#160b21;

    font-size:8px;
    font-weight:950;

    letter-spacing:1px;

    line-height:1;

    white-space:nowrap;

    box-shadow:
        0 0 18px
        rgba(164,82,255,.24);
}

.casekey-best{
    border-color:
        rgba(255,216,123,.65);

    background:
        linear-gradient(
            135deg,
            #ffd978,
            #d99329
        );

    color:#1b1106;

    box-shadow:
        0 0 18px
        rgba(239,188,101,.22);
}


/* 3 STORE TABS */

#privileges,
#staffcoin,
#casekeys{
    scroll-margin-top:105px;
}

.donate-catalog-switch{
    width:min(680px,100%);

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
}


@media(max-width:1100px){

    .casekey-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

}


@media(max-width:600px){

    .casekey-section{
        margin-top:55px;
        padding-top:42px;
    }

    .casekey-grid{
        grid-template-columns:
            1fr !important;
    }

    .casekey-card-inner{
        min-height:260px;
    }

    .casekey-name{
        font-size:22px;
    }

    .casekey-special-badge{
        top:-16px;
    }

    #privileges,
    #staffcoin,
    #casekeys{
        scroll-margin-top:85px;
    }

}

/* /STAFFLAND DONATE CASE KEYS */

/* STAFFLAND CASEKEY FINAL LAYOUT */


/* =========================================================
   STORE TABS — ALWAYS ONE ROW
   ========================================================= */

.donate-catalog-switch{
    width:min(720px, calc(100% - 24px)) !important;

    display:grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap:5px !important;
}

.donate-catalog-tab{
    width:100% !important;
    min-width:0 !important;

    padding:
        0 14px !important;

    white-space:nowrap !important;
}


/* =========================================================
   CASEKEY SECTION
   ========================================================= */

#casekeys.casekey-section{
    width:100% !important;

    margin-top:78px !important;
    padding-top:54px !important;

    border-top:
        1px solid
        rgba(255,255,255,.065) !important;
}


/* HEADER */

#casekeys .casekey-heading{
    width:100% !important;
    max-width:720px !important;

    margin:
        0 auto 40px !important;

    text-align:center !important;
}

#casekeys .casekey-heading-kicker{
    margin-bottom:10px !important;

    color:#bd7cff !important;

    font-size:10px !important;
    font-weight:950 !important;

    letter-spacing:.22em !important;
}

#casekeys .casekey-heading h2{
    margin:0 !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size:
        clamp(32px,4vw,48px) !important;

    font-weight:900 !important;

    letter-spacing:.07em !important;

    background:
        linear-gradient(
            90deg,
            #ecbaff,
            #be72ff 48%,
            #7738ff
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    text-align:center !important;
}

#casekeys .casekey-heading p{
    max-width:620px !important;

    margin:
        14px auto 0 !important;

    color:#777f85 !important;

    font-size:12px !important;
    line-height:1.65 !important;

    text-align:center !important;
}


/* =========================================================
   4 KEY PRODUCTS IN ONE ROW
   ========================================================= */

#casekeys .casekey-grid{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:20px !important;

    align-items:stretch !important;
}


/* CARD */

#casekeys .casekey-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
}

#casekeys .casekey-card-inner{
    width:100% !important;

    min-height:315px !important;

    box-sizing:border-box !important;

    padding:
        25px 16px 18px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-start !important;

    position:relative !important;

    overflow:visible !important;

    border:
        1px solid
        rgba(175,103,255,.16) !important;

    border-radius:18px !important;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(135,60,220,.10),
            transparent 45%
        ),
        rgba(11,14,17,.72) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 12px 32px
        rgba(0,0,0,.20) !important;
}


/* =========================================================
   CHEST IMAGE — NEVER CROP
   ========================================================= */

#casekeys .casekey-icon-wrap{
    width:155px !important;
    height:155px !important;

    min-width:155px !important;
    min-height:155px !important;

    margin:
        0 auto 10px !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:visible !important;

    position:relative !important;
}

#casekeys
.casekey-icon-wrap
img.casekey-icon{

    display:block !important;

    width:145px !important;
    height:145px !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:145px !important;
    max-height:145px !important;

    object-fit:contain !important;

    object-position:center !important;

    position:static !important;

    inset:auto !important;

    margin:0 auto !important;

    transform:none !important;

    border-radius:0 !important;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(0,0,0,.38)
        )
        drop-shadow(
            0 0 16px
            rgba(137,61,255,.16)
        ) !important;

    transition:
        transform .22s ease,
        filter .22s ease !important;
}

#casekeys
.casekey-card:hover
.casekey-icon-wrap
img.casekey-icon{

    transform:
        translateY(-3px)
        scale(1.05) !important;

    filter:
        drop-shadow(
            0 14px 22px
            rgba(0,0,0,.42)
        )
        drop-shadow(
            0 0 22px
            rgba(155,71,255,.28)
        ) !important;
}

#casekeys
.casekey-card > input:checked
+ .casekey-card-inner
.casekey-icon-wrap
img.casekey-icon{

    transform:
        translateY(-3px)
        scale(1.06) !important;
}


/* NAME */

#casekeys .casekey-name{
    width:100% !important;

    margin:
        2px 0 12px !important;

    text-align:center !important;

    font-size:19px !important;
    font-weight:950 !important;

    letter-spacing:.7px !important;
}


/* PRICE */

#casekeys .rank-price{
    width:100% !important;

    text-align:center !important;
}

#casekeys .rank-price strong{
    display:block !important;

    text-align:center !important;
}


/* BUTTON */

#casekeys .rank-buy{
    margin-top:auto !important;
}


/* BADGES */

#casekeys .casekey-special-badge{
    top:-13px !important;

    z-index:20 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    #casekeys .casekey-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

}


@media(max-width:600px){

    .donate-catalog-switch{
        width:100% !important;

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

    .donate-catalog-tab{
        padding:
            0 5px !important;

        font-size:9px !important;

        letter-spacing:.35px !important;
    }

    #casekeys.casekey-section{
        margin-top:55px !important;
        padding-top:42px !important;
    }

    #casekeys .casekey-grid{
        grid-template-columns:
            1fr !important;
    }

    #casekeys .casekey-card-inner{
        min-height:300px !important;
    }

}


/* /STAFFLAND CASEKEY FINAL LAYOUT */



/* STAFFLAND DONATE CASE TITLE BOOST */

#casekeys .casekey-heading-kicker{
    display:block !important;

    margin-bottom:14px !important;

    text-align:center !important;

    color:#c77cff !important;

    font-size:12px !important;
    font-weight:1000 !important;

    letter-spacing:.30em !important;
    text-transform:uppercase !important;

    text-shadow:
        0 0 16px rgba(174,96,255,.22) !important;
}

/* /STAFFLAND DONATE CASE TITLE BOOST */


/* =========================================
   STAFFLAND CASEKEY PRODUCTS TITLE
   ========================================= */

.casekey-products-title{
    width:100%;

    margin:
        8px auto 28px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;
}

.casekey-products-title::before,
.casekey-products-title::after{
    content:"";

    width:90px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(181,103,255,.55)
        );
}

.casekey-products-title::after{
    background:
        linear-gradient(
            90deg,
            rgba(181,103,255,.55),
            transparent
        );
}

.casekey-products-title span{
    padding:
        8px 18px;

    border:
        1px solid
        rgba(188,112,255,.35);

    border-radius:999px;

    background:
        rgba(130,55,200,.08);

    color:#c884ff;

    font-size:12px;
    font-weight:1000;

    letter-spacing:.24em;

    text-shadow:
        0 0 18px
        rgba(181,96,255,.35);

    box-shadow:
        0 0 24px
        rgba(139,64,220,.08);
}

@media(max-width:600px){

    .casekey-products-title{
        margin-bottom:24px;
        gap:10px;
    }

    .casekey-products-title::before,
    .casekey-products-title::after{
        width:38px;
    }

    .casekey-products-title span{
        font-size:10px;
        padding:7px 14px;
    }
}

/* /STAFFLAND CASEKEY PRODUCTS TITLE */

/* STAFFLAND LEGAL STORE FOOTER */

.donate-legal-footer{
    width:100%;

    margin-top:90px;

    padding:
        46px 20px
        36px;

    box-sizing:border-box;

    border-top:
        1px solid
        rgba(232,173,77,.12);

    background:
        linear-gradient(
            180deg,
            rgba(8,10,12,.35),
            rgba(6,8,10,.88)
        );
}

.donate-footer-inner{
    width:min(1050px,100%);

    margin:0 auto;

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;
}

.donate-footer-brand{
    margin-bottom:10px;

    color:#f5f5f5;

    font-size:18px;
    font-weight:1000;

    letter-spacing:.16em;
}

.donate-footer-brand span{
    color:#e8ad4d;
}

.donate-footer-copyright{
    color:#a4aaae;

    font-size:11px;
    font-weight:800;

    letter-spacing:.06em;
}

.donate-footer-disclaimer{
    max-width:760px;

    margin:
        17px auto 0;

    color:#686f74;

    font-size:10px;
    line-height:1.7;
}

.donate-footer-links{
    margin-top:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:11px;
}

.donate-footer-links a{
    color:#dba34e;

    text-decoration:none;

    font-size:9px;
    font-weight:950;

    letter-spacing:.10em;

    transition:
        color .2s,
        text-shadow .2s;
}

.donate-footer-links a:hover{
    color:#ffd17a;

    text-shadow:
        0 0 14px
        rgba(232,173,77,.28);
}

.donate-footer-links span{
    color:#464b4f;

    font-size:8px;
}

.donate-footer-digital{
    margin:
        18px auto 0;

    color:#50565a;

    font-size:9px;
    line-height:1.6;
}

@media(max-width:600px){

    .donate-legal-footer{
        margin-top:65px;

        padding:
            36px 18px
            30px;
    }

    .donate-footer-disclaimer{
        font-size:9px;
    }

    .donate-footer-links{
        gap:8px;
    }

    .donate-footer-links a{
        font-size:8px;
    }

}

/* /STAFFLAND LEGAL STORE FOOTER */