/* ============================================================
   HAPPY RAN DOWNLOAD V2
   ============================================================ */

body.classic-public-body:has(.dv2-page) {
    background: #04090d !important;
}

.dv2-page {
    --dv-bg: #04090d;
    --dv-panel: rgba(7, 17, 25, .97);
    --dv-panel2: rgba(9, 20, 29, .97);
    --dv-line: #2c4151;
    --dv-red: #d02732;
    --dv-red2: #ff4650;
    --dv-gold: #dba642;
    --dv-gold2: #ffd46b;
    --dv-blue: #54adff;
    --dv-green: #42df91;
    --dv-muted: #7b90a3;

    min-height: 100vh;
    padding-bottom: 60px;
    background:
        linear-gradient(
            180deg,
            #050a0e,
            #07111a 44%,
            #04090d
        );
}

.dv2-page .container {
    width: min(1320px, calc(100% - 42px)) !important;
    max-width: 1320px !important;
}


/* HERO */

.dv2-hero {
    min-height: 350px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(55, 116, 170, .34);
    background:
        url('/images/download-v2/download-hero-clean.png')
        center 45% / cover no-repeat;
}

.dv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 12, .20),
            rgba(3, 8, 12, .05) 50%,
            rgba(3, 8, 12, .22)
        );
}

.dv2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 145px;
    background:
        linear-gradient(
            180deg,
            transparent,
            #050a0f
        );
}

.dv2-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.03),
            rgba(0,0,0,.42) 80%
        );
}

.dv2-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.dv2-hero-content > span {
    color: #ff4c56;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 5px;
}

.dv2-hero h1 {
    margin: 7px 0 7px !important;
    color: #f2eee6 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(58px, 7vw, 92px) !important;
    line-height: .95 !important;
    text-shadow:
        0 4px 0 rgba(0,0,0,.45),
        0 0 28px rgba(246, 229, 198, .08);
}

.dv2-hero p {
    margin: 0 !important;
    color: #e4cfa5 !important;
    font-family: Georgia, serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
}


/* MAIN */

.dv2-container {
    position: relative;
    z-index: 5;
    margin-top: -25px !important;
}

.dv2-section {
    margin-bottom: 16px;
}

.dv2-section-title {
    min-height: 68px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid rgba(158, 114, 39, .56);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 19, 28, .98),
            rgba(6, 14, 21, .99)
        );
}

.dv2-section-title > div:first-child > span {
    color: #e53b45;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.dv2-section-title h2 {
    margin: 3px 0 0 !important;
    color: #f1eee7 !important;
    font-family: Georgia, serif !important;
    font-size: 20px !important;
}

.dv2-live {
    min-height: 31px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #2c526b;
    background: #07141d;
}

.dv2-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dv-green);
    box-shadow: 0 0 9px rgba(66, 223, 145, .52);
}

.dv2-live span {
    color: #6ea2c7;
    font-size: 6px;
    font-weight: 900;
}


/* DOWNLOAD CARDS */

.dv2-download-grid {
    padding: 13px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 11px;
    border: 1px solid rgba(158, 114, 39, .56);
    border-top: 1px solid rgba(105, 83, 41, .22);
    border-radius: 0 0 7px 7px;
    background:
        linear-gradient(
            180deg,
            rgba(7, 17, 25, .98),
            rgba(5, 12, 18, .99)
        );
}

.dv2-download-grid.count-1 {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

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

.dv2-download-grid.count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.dv2-download-card {
    min-width: 0;
    position: relative;
    padding: 19px 16px 16px;
    overflow: hidden;
    border: 1px solid #2e4353;
    border-radius: 6px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(58, 78, 91, .16),
            transparent 36%
        ),
        #07131c;
    box-shadow:
        0 10px 26px rgba(0,0,0,.20);
}

.dv2-download-card.recommended {
    border-color: #a87a2c;
    box-shadow:
        0 0 0 1px rgba(216, 157, 50, .06),
        0 0 28px rgba(181, 116, 22, .09);
}

.dv2-recommended,
.dv2-card-label {
    position: absolute;
    left: 50%;
    top: 0;
    padding: 5px 13px;
    transform: translateX(-50%);
    border-radius: 0 0 4px 4px;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
    white-space: nowrap;
}

.dv2-recommended {
    border: 1px solid #ca3540;
    border-top: 0;
    background: #8e1820;
    color: #fff;
}

.dv2-card-label {
    border: 1px solid #3b5263;
    border-top: 0;
    background: #101b24;
    color: #93a7b7;
}

.dv2-download-icon {
    width: 82px;
    height: 82px;
    margin: 15px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #624c2d;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 35% 25%,
            #453320,
            #17120d 65%
        );
    color: #e2b760;
    font-family: Georgia, serif;
    font-size: 35px;
    box-shadow:
        inset 0 0 20px rgba(230, 172, 67, .05),
        0 11px 25px rgba(0,0,0,.31);
}

.dv2-download-card.launcher .dv2-download-icon {
    border-color: #2d5879;
    background:
        radial-gradient(
            circle at 35% 25%,
            #15364f,
            #0a151d 65%
        );
    color: #55adff;
}

.dv2-download-card.patch .dv2-download-icon {
    border-color: #79414a;
    background:
        radial-gradient(
            circle at 35% 25%,
            #451c22,
            #150c0f 65%
        );
    color: #ff626a;
}

.dv2-download-card.manual .dv2-download-icon {
    border-color: #4a5b69;
    background:
        radial-gradient(
            circle at 35% 25%,
            #293947,
            #11191f 65%
        );
    color: #b5c4cf;
}

.dv2-download-copy {
    text-align: center;
}

.dv2-download-copy > span {
    color: #d49e3e;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dv2-download-copy h3 {
    margin: 5px 0 7px !important;
    overflow: hidden;
    color: #f2ede4 !important;
    font-family: Georgia, serif !important;
    font-size: 21px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv2-download-copy p {
    min-height: 48px;
    margin: 0 !important;
    display: -webkit-box;
    overflow: hidden;
    color: #7c90a2 !important;
    font-size: 8px !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.dv2-download-info {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #293d4c;
    background: #061019;
}

.dv2-download-info > div {
    min-height: 52px;
    padding: 9px 10px;
    border-right: 1px solid #293d4c;
}

.dv2-download-info > div:last-child {
    border-right: 0;
}

.dv2-download-info span,
.dv2-download-info strong {
    display: block;
}

.dv2-download-info span {
    color: #6f8598;
    font-size: 6px;
    font-weight: 900;
}

.dv2-download-info strong {
    margin-top: 4px;
    color: #dfe6eb;
    font-size: 9px;
}

.dv2-mirror-list {
    margin-top: 9px;
    display: grid;
    gap: 6px;
}

.dv2-mirror-list a {
    min-height: 43px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid;
    border-radius: 3px;
    text-decoration: none;
}

.dv2-mirror-list a.primary {
    border-color: #dc323c;
    background:
        linear-gradient(
            180deg,
            #cb2933,
            #7d151b
        );
    color: #fff;
}

.dv2-mirror-list a.secondary {
    border-color: #354b5c;
    background: #08141d;
    color: #a7bac9;
}

.dv2-download-arrow {
    font-size: 15px;
    font-weight: 900;
}

.dv2-download-button-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dv2-download-button-copy strong {
    font-size: 7px;
    font-weight: 900;
}

.dv2-download-button-copy small {
    margin-top: 1px;
    font-size: 6px;
    opacity: .72;
}

.dv2-coming-soon,
.dv2-empty {
    padding: 15px;
    border: 1px solid #334857;
    background: #07121a;
    color: #718799;
    font-size: 7px;
    font-weight: 900;
    text-align: center;
}

.dv2-coming-soon {
    margin-top: 9px;
}

.dv2-empty {
    border-color: rgba(158, 114, 39, .56);
    border-radius: 0 0 7px 7px;
}


/* LOWER GRID */

.dv2-lower-grid {
    display: grid;
    grid-template-columns:
        1fr
        1.15fr
        .9fr;
    gap: 12px;
}

.dv2-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(157, 115, 40, .52);
    border-radius: 7px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 19, 28, .98),
            rgba(5, 13, 20, .99)
        );
}

.dv2-panel-title {
    min-height: 56px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(108, 85, 45, .28);
}

.dv2-panel-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #674f26;
    color: #e7b759;
}

.dv2-panel-title div > span {
    color: #e03943;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.dv2-panel-title h2 {
    margin: 2px 0 0 !important;
    color: #ede9e1 !important;
    font-family: Georgia, serif !important;
    font-size: 15px !important;
}


/* INSTALL */

.dv2-steps {
    padding: 12px;
}

.dv2-step {
    min-height: 66px;
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
}

.dv2-step:not(:last-child)::after {
    content: "";
    width: 1px;
    position: absolute;
    left: 17px;
    top: 34px;
    bottom: 0;
    background: #304453;
}

.dv2-step > strong {
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #34516a;
    border-radius: 50%;
    background: #08151e;
    color: #68b0eb;
    font-size: 7px;
}

.dv2-step h3 {
    margin: 1px 0 4px !important;
    color: #e4e9ed !important;
    font-size: 8px !important;
}

.dv2-step p {
    margin: 0 !important;
    color: #708698 !important;
    font-size: 7px !important;
    line-height: 1.5 !important;
}


/* REQUIREMENTS */

.dv2-requirement-grid {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dv2-requirement {
    padding: 11px;
    border: 1px solid #2d4252;
    background: #061019;
}

.dv2-requirement.recommended {
    border-color: #5d512d;
    background:
        radial-gradient(
            circle at top right,
            rgba(148, 103, 25, .07),
            transparent 38%
        ),
        #061019;
}

.dv2-requirement > span {
    color: #70a9d3;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}

.dv2-requirement.recommended > span {
    color: #e1ad49;
}

.dv2-requirement ul {
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.dv2-requirement li {
    min-height: 27px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(65, 87, 104, .17);
    color: #8194a5;
    font-size: 7px;
    line-height: 1.45;
}

.dv2-requirement li:last-child {
    border-bottom: 0;
}

.dv2-requirement li b {
    margin-right: 5px;
    color: #c7d3dc;
    font-size: 6px;
}


/* MIRRORS */

.dv2-mirror-summary {
    padding: 12px;
}

.dv2-mirror-summary > a {
    min-height: 48px;
    margin-bottom: 6px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    border: 1px solid #2c4150;
    border-radius: 3px;
    background: #061019;
    color: inherit;
    text-decoration: none;
}

.dv2-mirror-summary > a:hover {
    border-color: #785a2c;
}

.dv2-mirror-number {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #36516a;
    color: #6bb1ea;
    font-size: 7px;
    font-weight: 900;
}

.dv2-mirror-summary strong,
.dv2-mirror-summary small {
    display: block;
}

.dv2-mirror-summary strong {
    color: #dce5eb;
    font-size: 7px;
}

.dv2-mirror-summary small {
    margin-top: 2px;
    overflow: hidden;
    color: #627b8f;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv2-mirror-summary b {
    padding: 5px 7px;
    border: 1px solid #8e272d;
    background: #451217;
    color: #ff6e74;
    font-size: 6px;
}

.dv2-no-mirror {
    padding: 20px;
    color: #6f8394;
    font-size: 7px;
    text-align: center;
}


/* TRUST */

.dv2-trust {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #653f31;
    border-radius: 6px;
    background:
        linear-gradient(
            90deg,
            rgba(35, 17, 16, .54),
            rgba(8, 17, 24, .98),
            rgba(25, 18, 10, .50)
        );
}

.dv2-trust > div {
    min-height: 82px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-right: 1px solid rgba(92, 74, 55, .30);
}

.dv2-trust > div:last-child {
    border-right: 0;
}

.dv2-trust-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #765926;
    border-radius: 50%;
    color: #f0bd58;
    font-size: 19px;
}

.dv2-trust strong,
.dv2-trust small {
    display: block;
}

.dv2-trust strong {
    color: #e8ca86;
    font-family: Georgia, serif;
    font-size: 11px;
}

.dv2-trust small {
    margin-top: 3px;
    color: #718596;
    font-size: 7px;
}


/* RESPONSIVE */

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

    .dv2-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dv2-mirrors {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .dv2-page .container {
        width: min(100% - 24px, 1320px) !important;
    }

    .dv2-hero {
        min-height: 310px;
        background-position: center;
    }

    .dv2-hero h1 {
        font-size: 54px !important;
    }

    .dv2-download-grid,
    .dv2-lower-grid,
    .dv2-trust {
        grid-template-columns: 1fr;
    }

    .dv2-trust > div {
        border-right: 0;
        border-bottom: 1px solid rgba(92, 74, 55, .30);
    }

    .dv2-trust > div:last-child {
        border-bottom: 0;
    }

    .dv2-requirement-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .dv2-hero {
        min-height: 260px;
        background-size: auto 260px;
    }

    .dv2-hero-content > span {
        letter-spacing: 3px;
    }

    .dv2-hero h1 {
        font-size: 46px !important;
    }

    .dv2-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .dv2-live {
        width: 100%;
    }
}


/* ============================================================
   V2.1 POLISH
   ============================================================ */

.dv2-hero-content {
    padding-top: 8px;
}

.dv2-hero-content > span {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(215, 45, 56, .45);
    background: rgba(45, 11, 14, .34);
    backdrop-filter: blur(4px);
}

.dv2-hero h1 {
    margin-top: 10px !important;
    letter-spacing: 1px !important;
}

.dv2-hero p {
    padding: 0 14px;
}

.dv2-download-card {
    min-height: 330px;
    display: flex;
    flex-direction: column;
}

.dv2-download-copy {
    min-height: 108px;
}

.dv2-download-info {
    margin-top: auto;
}

.dv2-mirror-list,
.dv2-coming-soon {
    margin-top: 9px;
}

.dv2-panel,
.dv2-download-card {
    backdrop-filter: blur(3px);
}

@media (max-width: 1100px) {
    .dv2-download-grid.count-3,
    .dv2-download-grid.count-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dv2-download-grid.count-1,
    .dv2-download-grid.count-2,
    .dv2-download-grid.count-3,
    .dv2-download-grid.count-4 {
        grid-template-columns: 1fr;
    }
}
