/* View-specific public support section layouts. */

.support-app-nav-panel {
    transform: translateY(-10px) !important;
}

.support-view-heading,
.info-card,
.panel,
.action-card,
.term-list.compact-term-list > div,
.redemption-card,
.achievement-card {
    position: relative;
}

.support-view-heading::before,
.panel::before,
.action-card::before,
.term-list.compact-term-list > div::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 17px;
    height: 17px;
    border-top: 2px solid rgba(126, 223, 255, 0.46);
    border-left: 2px solid rgba(126, 223, 255, 0.46);
    border-top-left-radius: 8px;
    pointer-events: none;
    opacity: 0.72;
    z-index: 3;
}

.info-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-top: 2px solid rgba(126, 223, 255, 0.58);
    border-left: 2px solid rgba(126, 223, 255, 0.58);
    border-top-left-radius: 22px;
    pointer-events: none;
    opacity: 0.78;
    z-index: 4;
}

.action-card::before,
.term-list.compact-term-list > div::before {
    width: 13px;
    height: 13px;
    opacity: 0.58;
}

.support-view-heading,
.panel,
.info-card,
.action-card,
.term-list.compact-term-list > div {
    background-image:
        radial-gradient(circle at 8% 0%, rgba(126, 223, 255, 0.07), transparent 28%),
        linear-gradient(135deg, rgba(126, 223, 255, 0.018), transparent 42%) !important;
}

.info-card,
.action-card,
.term-list.compact-term-list > div {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.info-card:hover,
.action-card:hover,
.term-list.compact-term-list > div:hover {
    border-color: rgba(126, 223, 255, 0.48);
    box-shadow: 0 0 18px rgba(35, 180, 255, 0.12), inset 0 0 18px rgba(126, 223, 255, 0.035);
    transform: translateY(-1px);
}

.info-card::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 22px;
    height: 22px;
    border-right: 2px solid rgba(126, 223, 255, .38);
    border-bottom: 2px solid rgba(126, 223, 255, .38);
    border-bottom-right-radius: 22px;
    opacity: 0.55;
    transform: none;
    transition: opacity .18s ease, border-color .18s ease;
    pointer-events: none;
    z-index: 4;
}

.info-card:hover::after {
    opacity: 0.9;
    border-color: rgba(126, 223, 255, .62);
    transform: none;
}

.support-app-nav-link {
    --nav-accent: var(--accent);
    --nav-accent-rgb: 126, 223, 255;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(var(--nav-accent-rgb), 0.28);
    background:
        radial-gradient(circle at 0% 50%, rgba(var(--nav-accent-rgb), 0.08), transparent 50%),
        rgba(8, 24, 45, 0.54);
    box-shadow: inset 3px 0 0 rgba(var(--nav-accent-rgb), 0.30);
}

.support-app-nav-link::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, transparent, rgba(var(--nav-accent-rgb), 0.82), transparent);
    opacity: 0.76;
    pointer-events: none;
    transition: opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
    z-index: 0;
}

.support-app-nav-link::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 18px;
    height: 18px;
    border-top: 1px solid rgba(var(--nav-accent-rgb), 0.42);
    border-right: 1px solid rgba(var(--nav-accent-rgb), 0.42);
    border-top-right-radius: 13px;
    opacity: 0.34;
    pointer-events: none;
    transition: opacity 180ms ease, border-color 180ms ease;
    z-index: 0;
}

.support-app-nav-link > * {
    position: relative;
    z-index: 1;
}

.support-app-nav-link span {
    text-shadow: 0 0 10px rgba(var(--nav-accent-rgb), 0.14);
}

.support-app-nav-link[data-support-nav="overview"] {
    --nav-accent: var(--accent);
    --nav-accent-rgb: 126, 223, 255;
}

.support-app-nav-link[data-support-nav="leaderboards"] {
    --nav-accent: #d7ecff;
    --nav-accent-rgb: 215, 236, 255;
}

.support-app-nav-link[data-support-nav="profile"] {
    --nav-accent: #7edfff;
    --nav-accent-rgb: 126, 223, 255;
}

.support-app-nav-link[data-support-nav="rank"] {
    --nav-accent: #b09aff;
    --nav-accent-rgb: 176, 154, 255;
}

.support-app-nav-link[data-support-nav="credits"] {
    --nav-accent: #81ffc3;
    --nav-accent-rgb: 129, 255, 195;
}

.support-app-nav-link[data-support-nav="achievements"] {
    --nav-accent: #ffd37e;
    --nav-accent-rgb: 255, 211, 126;
}

.support-app-nav-link[data-support-nav="redemptions"] {
    --nav-accent: #ff8a3d;
    --nav-accent-rgb: 255, 138, 61;
}

.support-app-nav-link:hover,
.support-app-nav-link.active {
    border-color: rgba(var(--nav-accent-rgb), 0.82);
    background:
        radial-gradient(circle at 0% 50%, rgba(var(--nav-accent-rgb), 0.24), transparent 48%),
        linear-gradient(135deg, rgba(var(--nav-accent-rgb), 0.10), rgba(18, 51, 84, 0.84) 46%, rgba(8, 24, 45, 0.82));
    box-shadow: 0 0 20px rgba(var(--nav-accent-rgb), 0.24), inset 4px 0 0 rgba(var(--nav-accent-rgb), 0.92), inset 0 0 16px rgba(var(--nav-accent-rgb), 0.045);
}

.support-app-nav-link:hover::before,
.support-app-nav-link.active::before {
    opacity: 1;
    background: linear-gradient(180deg, transparent, rgba(var(--nav-accent-rgb), 1), transparent);
    box-shadow: 0 0 18px rgba(var(--nav-accent-rgb), 0.58);
}

.support-app-nav-link:hover::after,
.support-app-nav-link.active::after {
    opacity: 0.82;
    border-color: rgba(var(--nav-accent-rgb), 0.82);
}

.support-app-nav-link.active small {
    color: rgba(234, 247, 255, 0.78);
}

@media (min-width: 1001px) {
    #rank.support-view-active .rank-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--support-side-panel-column) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    #rank.support-view-active .rank-panel {
        grid-column: 1 !important;
        min-width: 0;
    }

    #rank.support-view-active .rank-subscription-panel {
        grid-column: 2 !important;
        min-width: 0;
        position: sticky !important;
        top: 104px !important;
        align-self: start !important;
    }

    #redeem.support-view-active {
        display: block !important;
    }

    #redeem.support-view-active .redemptions-view-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--support-side-panel-column) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    #credits.support-view-active #earn > aside.panel,
    #redeem.support-view-active .recent-redemptions-panel,
    #achievements.support-view-active .recent-achievements-panel {
        position: sticky !important;
        top: 104px !important;
        align-self: start !important;
    }

    #achievements.support-view-active.achievements-two-column {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--support-side-panel-column);
        gap: 12px 18px;
        align-items: start;
    }

    #achievements.support-view-active.achievements-two-column > .support-view-heading {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin-bottom: 0;
    }

    #achievements.support-view-active.achievements-two-column > #achievement-list {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #achievements.support-view-active.achievements-two-column > .recent-achievements-panel {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
    #rank.support-view-active .rank-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    #rank.support-view-active .rank-panel {
        grid-column: 1 !important;
        min-width: 0;
    }

    #rank.support-view-active .rank-subscription-panel {
        grid-column: 2 !important;
        min-width: 0;
        position: static !important;
        align-self: start !important;
    }
}

#credits,
#rank,
#achievements,
#redeem {
    --view-accent-rgb: 126, 223, 255;
    --view-accent-soft: rgba(126, 223, 255, 0.08);
    --view-accent-title: var(--accent);
}

#credits {
    --view-accent-rgb: 129, 255, 195;
    --view-accent-soft: rgba(129, 255, 195, 0.08);
    --view-accent-title: #81ffc3;
}

#rank {
    --view-accent-rgb: 176, 154, 255;
    --view-accent-soft: rgba(176, 154, 255, 0.09);
    --view-accent-title: #d8ceff;
}

#achievements {
    --view-accent-rgb: 255, 211, 126;
    --view-accent-soft: rgba(255, 211, 126, 0.08);
    --view-accent-title: #ffe08c;
}

#redeem {
    --view-accent-rgb: 255, 138, 61;
    --view-accent-soft: rgba(255, 138, 61, 0.085);
    --view-accent-title: #ffb16a;
}

#credits .support-view-heading,
#rank .support-view-heading,
#achievements .support-view-heading,
#redeem .support-view-heading,
#credits #earn > section.panel,
#rank .rank-panel,
#achievement-list.achievement-grid,
#redemption-list.redemption-grid {
    border-color: rgba(var(--view-accent-rgb), 0.38);
    background:
        radial-gradient(circle at 8% 0%, var(--view-accent-soft), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(126, 223, 255, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(var(--view-accent-rgb), 0.040), rgba(5, 15, 31, 0.78) 42%, rgba(5, 15, 31, 0.90)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--view-accent-rgb), 0.040),
        inset 0 1px 0 rgba(234, 247, 255, 0.045),
        0 0 24px rgba(var(--view-accent-rgb), 0.075);
}

#credits .support-view-heading .eyebrow,
#rank .support-view-heading .eyebrow,
#achievements .support-view-heading .eyebrow,
#redeem .support-view-heading .eyebrow,
#credits #earn > section.panel .section-heading .eyebrow,
#rank .rank-panel .panel-title {
    color: var(--view-accent-title);
}

#credits .support-view-heading::before,
#rank .support-view-heading::before,
#achievements .support-view-heading::before,
#redeem .support-view-heading::before,
#credits #earn > section.panel::before,
#rank .rank-panel::before {
    border-color: rgba(var(--view-accent-rgb), 0.62);
}