/* Sticky selected-viewer HUD, standing cards, activity cards, and sticky navigation states. */

.sticky-viewer-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(94px, 1fr));
    gap: 5px;
    min-width: 0;
}

.sticky-viewer-hud .sticky-hud-pill.available { order: 1; }
.sticky-viewer-hud .sticky-hud-pill:has(#sticky-hud-standing) { order: 2; }
.sticky-viewer-hud .sticky-hud-pill:has(#sticky-hud-rank) { order: 3; }

.sticky-hud-pill {
    position: relative;
    display: grid;
    gap: 1px;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid rgba(126, 223, 255, 0.22);
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(234, 247, 255, 0.035), transparent 42%),
        linear-gradient(135deg, rgba(9, 28, 50, 0.74), rgba(5, 15, 31, 0.52));
    color: var(--text);
    align-content: center;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(234, 247, 255, 0.07),
        inset 0 -10px 18px rgba(0, 0, 0, 0.12),
        inset 0 0 16px rgba(126, 223, 255, 0.025);
}

.sticky-hud-pill::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 223, 255, 0.62), transparent);
    opacity: 0.48;
    pointer-events: none;
}

.sticky-hud-label {
    color: rgba(126, 223, 255, 0.82);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sticky-hud-value {
    color: var(--text);
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-hud-pill.available {
    border-color: rgba(129, 255, 195, .38);
    background:
        linear-gradient(180deg, rgba(129, 255, 195, 0.08), transparent 44%),
        linear-gradient(135deg, rgba(129, 255, 195, 0.10), rgba(5, 15, 31, 0.55));
    box-shadow:
        inset 0 1px 0 rgba(218, 255, 238, 0.08),
        inset 3px 0 0 rgba(129, 255, 195, 0.30),
        inset 0 0 16px rgba(129, 255, 195, 0.045);
}

.sticky-hud-pill.available::before {
    background: linear-gradient(90deg, transparent, rgba(129, 255, 195, 0.72), transparent);
}

.sticky-hud-pill.available .sticky-hud-label {
    color: rgba(129, 255, 195, .82);
}

.sticky-hud-pill.available .sticky-hud-value {
    color: var(--success);
    font-size: 10.5px;
}

.sticky-hud-pill.available.sticky-nav-card:hover,
.sticky-hud-pill.available.sticky-nav-card:focus-visible {
    border-color: rgba(129, 255, 195, .76);
    background:
        linear-gradient(180deg, rgba(129, 255, 195, 0.12), transparent 45%),
        linear-gradient(135deg, rgba(129, 255, 195, .15), rgba(8, 24, 45, .76));
    box-shadow: 0 0 18px rgba(129, 255, 195, .16), inset 3px 0 0 rgba(129, 255, 195, .42), inset 0 0 14px rgba(129, 255, 195, .06);
}

.sticky-hud-pill.available.sticky-nav-card::after { border-color: rgba(129, 255, 195, .50); }

.sticky-hud-pill:has(#sticky-hud-rank) {
    border-color: rgba(176, 154, 255, 0.48);
    background:
        linear-gradient(180deg, rgba(176, 154, 255, 0.09), transparent 44%),
        linear-gradient(135deg, rgba(176, 154, 255, 0.13), rgba(8, 24, 45, 0.70));
    box-shadow: inset 3px 0 0 rgba(176, 154, 255, 0.28), inset 0 0 16px rgba(176, 154, 255, 0.045);
}

.sticky-hud-pill:has(#sticky-hud-rank)::before {
    background: linear-gradient(90deg, transparent, rgba(176, 154, 255, .72), transparent);
}

.sticky-hud-pill:has(#sticky-hud-rank) .sticky-hud-label {
    color: rgba(176, 154, 255, 0.86);
}

.sticky-hud-pill:has(#sticky-hud-rank) .sticky-hud-value {
    color: #d8ceff;
}

#sticky-hud-rank.has-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

#sticky-hud-rank .sticky-hud-rank-text {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sticky-hud-rank .sticky-rank-badge {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    min-width: 23px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

#sticky-hud-rank .sticky-rank-badge img {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    object-fit: contain !important;
    filter: none !important;
}

.sticky-hud-pill:has(#sticky-hud-rank).sticky-nav-card:hover,
.sticky-hud-pill:has(#sticky-hud-rank).sticky-nav-card:focus-visible {
    border-color: rgba(176, 154, 255, .78);
    background:
        linear-gradient(180deg, rgba(176, 154, 255, .12), transparent 44%),
        linear-gradient(135deg, rgba(176, 154, 255, .18), rgba(18, 51, 84, .82));
    box-shadow: 0 0 18px rgba(176, 154, 255, .18), inset 3px 0 0 rgba(176, 154, 255, .40), inset 0 0 14px rgba(176, 154, 255, .06);
}

.sticky-hud-pill:has(#sticky-hud-rank)::after {
    border-color: rgba(176, 154, 255, .56);
}

.sticky-hud-pill.standing-rank-1 {
    border-color: rgba(255, 211, 126, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 211, 126, 0.11), transparent 44%),
        linear-gradient(135deg, rgba(255, 211, 126, 0.12), rgba(18, 51, 84, 0.82));
    box-shadow: 0 0 26px rgba(255, 211, 126, 0.14), inset 3px 0 0 rgba(255, 211, 126, 0.34), inset 0 0 18px rgba(255, 211, 126, 0.05);
}

.sticky-hud-pill.standing-rank-1::before {
    background: linear-gradient(90deg, transparent, rgba(255, 211, 126, .78), transparent);
}

.sticky-hud-pill.standing-rank-2 {
    border-color: rgba(190, 225, 255, 0.52);
    background:
        linear-gradient(180deg, rgba(190, 225, 255, 0.08), transparent 44%),
        linear-gradient(135deg, rgba(190, 225, 255, 0.09), rgba(8, 24, 45, 0.72));
    box-shadow: inset 3px 0 0 rgba(190, 225, 255, 0.28), inset 0 0 16px rgba(190, 225, 255, 0.04);
}

.sticky-hud-pill.standing-rank-2::before {
    background: linear-gradient(90deg, transparent, rgba(190, 225, 255, .70), transparent);
}

.sticky-hud-pill.standing-rank-3 {
    border-color: rgba(255, 170, 105, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 170, 105, 0.075), transparent 44%),
        linear-gradient(135deg, rgba(255, 170, 105, 0.08), rgba(8, 24, 45, 0.70));
    box-shadow: inset 3px 0 0 rgba(255, 170, 105, 0.24);
}

.sticky-hud-pill.standing-rank-3::before {
    background: linear-gradient(90deg, transparent, rgba(255, 170, 105, .62), transparent);
}

#sticky-hud-standing {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

#sticky-hud-standing .sticky-standing-text {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-hud-pill.has-standing-medal #sticky-hud-standing .sticky-standing-medal {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    overflow: visible;
}

#sticky-hud-standing .sticky-standing-medal img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.sticky-nav-card { cursor: pointer; }

.sticky-nav-card::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 18px;
    height: 18px;
    border-top: 2px solid rgba(126, 223, 255, .42);
    border-right: 2px solid rgba(126, 223, 255, .42);
    border-top-right-radius: 11px;
    opacity: 0;
    transform: none;
    transition: opacity .18s ease, border-color .18s ease;
    pointer-events: none;
}

.sticky-hud-pill.sticky-nav-card {
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sticky-nav-card:hover,
.sticky-nav-card:focus-visible {
    border-color: rgba(126, 223, 255, .66);
    background:
        linear-gradient(180deg, rgba(126, 223, 255, .08), transparent 44%),
        linear-gradient(135deg, rgba(18, 51, 84, .84), rgba(6, 19, 38, .66));
    box-shadow: 0 0 16px rgba(35, 180, 255, .14), inset 0 0 14px rgba(126, 223, 255, .05);
    transform: translateY(-1px);
    outline: none;
}

.sticky-nav-card:hover::after,
.sticky-nav-card:focus-visible::after {
    opacity: 1;
    transform: none;
}

.sticky-hud-pill.standing-rank-1.sticky-nav-card:hover,
.sticky-hud-pill.standing-rank-1.sticky-nav-card:focus-visible {
    border-color: rgba(255, 224, 148, 0.96);
    background:
        linear-gradient(180deg, rgba(255, 211, 126, 0.15), transparent 44%),
        linear-gradient(135deg, rgba(255, 211, 126, 0.20), rgba(18, 51, 84, 0.88));
    box-shadow: 0 0 26px rgba(255, 211, 126, 0.24), inset 3px 0 0 rgba(255, 211, 126, 0.46), inset 0 0 18px rgba(255, 211, 126, 0.07);
}

.sticky-hud-pill.standing-rank-2.sticky-nav-card:hover,
.sticky-hud-pill.standing-rank-2.sticky-nav-card:focus-visible {
    border-color: rgba(205, 235, 255, 0.92);
    background:
        linear-gradient(180deg, rgba(190, 225, 255, 0.12), transparent 44%),
        linear-gradient(135deg, rgba(190, 225, 255, 0.16), rgba(18, 51, 84, 0.86));
    box-shadow: 0 0 22px rgba(190, 225, 255, 0.20), inset 3px 0 0 rgba(190, 225, 255, 0.38), inset 0 0 16px rgba(190, 225, 255, 0.06);
}

.sticky-hud-pill.standing-rank-3.sticky-nav-card:hover,
.sticky-hud-pill.standing-rank-3.sticky-nav-card:focus-visible {
    border-color: rgba(255, 180, 118, 0.86);
    background:
        linear-gradient(180deg, rgba(255, 170, 105, 0.10), transparent 44%),
        linear-gradient(135deg, rgba(255, 170, 105, 0.14), rgba(18, 51, 84, 0.84));
    box-shadow: 0 0 20px rgba(255, 170, 105, 0.18), inset 3px 0 0 rgba(255, 170, 105, 0.34), inset 0 0 14px rgba(255, 170, 105, 0.055);
}

.sticky-activity-card.achievement.sticky-nav-card:hover,
.sticky-activity-card.achievement.sticky-nav-card:focus-visible {
    border-color: rgba(255, 211, 126, .72);
    background:
        linear-gradient(180deg, rgba(255, 211, 126, .11), transparent 44%),
        linear-gradient(135deg, rgba(255, 211, 126, .12), rgba(8, 24, 45, .70));
    box-shadow: 0 0 18px rgba(255, 211, 126, .16), inset 3px 0 0 rgba(255, 211, 126, .36), inset 0 0 14px rgba(255, 211, 126, .05);
}

.sticky-activity-card.achievement.sticky-nav-card::after { border-color: rgba(255, 211, 126, .48); }

.sticky-activity-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.sticky-activity-card {
    position: relative;
    display: grid;
    align-content: center;
    justify-content: center;
    justify-items: center;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid rgba(93, 210, 255, 0.18);
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(234, 247, 255, 0.026), transparent 44%),
        linear-gradient(135deg, rgba(8, 24, 45, .62), rgba(5, 15, 31, .46));
    text-align: center;
    transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease, transform .18s ease;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(234, 247, 255, 0.055), inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}

.sticky-activity-card.has-data {
    border-color: rgba(93, 210, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(126, 223, 255, 0.07), transparent 44%),
        rgba(18, 51, 84, 0.66);
    box-shadow: inset 0 0 16px rgba(126, 223, 255, .05);
}

.sticky-activity-card.changed {
    border-color: var(--border-hot);
    background: rgba(18, 51, 84, 0.84);
    box-shadow: 0 0 18px rgba(55, 187, 255, 0.18);
}

.sticky-activity-card.tone-credit {
    border-color: rgba(129, 255, 195, .24);
}

.sticky-activity-card.tone-credit.has-data {
    border-color: rgba(129, 255, 195, .58);
    background:
        linear-gradient(180deg, rgba(129, 255, 195, .10), transparent 44%),
        linear-gradient(135deg, rgba(129, 255, 195, .10), rgba(8, 24, 45, .68));
    box-shadow: inset 3px 0 0 rgba(129, 255, 195, .34), inset 0 0 14px rgba(129, 255, 195, .045);
}

.sticky-activity-card.tone-credit.changed {
    border-color: rgba(129, 255, 195, .86);
    background: linear-gradient(135deg, rgba(129, 255, 195, .14), rgba(18, 51, 84, .86));
    box-shadow: 0 0 22px rgba(129, 255, 195, .20), inset 3px 0 0 rgba(129, 255, 195, .42), inset 0 0 18px rgba(129, 255, 195, .07);
}

.sticky-activity-card.tone-credit.sticky-nav-card:hover,
.sticky-activity-card.tone-credit.sticky-nav-card:focus-visible {
    border-color: rgba(129, 255, 195, .76);
    background:
        linear-gradient(180deg, rgba(129, 255, 195, .11), transparent 44%),
        linear-gradient(135deg, rgba(129, 255, 195, .15), rgba(8, 24, 45, .76));
    box-shadow: 0 0 18px rgba(129, 255, 195, .16), inset 3px 0 0 rgba(129, 255, 195, .40), inset 0 0 14px rgba(129, 255, 195, .05);
}

.sticky-activity-card.tone-credit.sticky-nav-card::after { border-color: rgba(129, 255, 195, .48); }

.sticky-activity-card.tone-redemption {
    border-color: rgba(255, 138, 61, .24);
}

.sticky-activity-card.tone-redemption.has-data {
    border-color: rgba(255, 138, 61, .58);
    background:
        linear-gradient(180deg, rgba(255, 138, 61, .095), transparent 44%),
        linear-gradient(135deg, rgba(255, 138, 61, .10), rgba(8, 24, 45, .68));
    box-shadow: inset 3px 0 0 rgba(255, 138, 61, .32), inset 0 0 14px rgba(255, 138, 61, .045);
}

.sticky-activity-card.tone-redemption.changed {
    border-color: rgba(255, 138, 61, .86);
    background: linear-gradient(135deg, rgba(255, 138, 61, .14), rgba(18, 51, 84, .86));
    box-shadow: 0 0 22px rgba(255, 138, 61, .18), inset 3px 0 0 rgba(255, 138, 61, .40), inset 0 0 18px rgba(255, 138, 61, .07);
}

.sticky-activity-card.tone-redemption.sticky-nav-card:hover,
.sticky-activity-card.tone-redemption.sticky-nav-card:focus-visible {
    border-color: rgba(255, 138, 61, .76);
    background:
        linear-gradient(180deg, rgba(255, 138, 61, .11), transparent 44%),
        linear-gradient(135deg, rgba(255, 138, 61, .15), rgba(8, 24, 45, .76));
    box-shadow: 0 0 18px rgba(255, 138, 61, .16), inset 3px 0 0 rgba(255, 138, 61, .38), inset 0 0 14px rgba(255, 138, 61, .05);
}

.sticky-activity-card.tone-redemption.sticky-nav-card::after { border-color: rgba(255, 138, 61, .48); }

.sticky-activity-card.achievement { border-color: rgba(255, 211, 126, .26); }

.sticky-activity-card.achievement.has-data {
    border-color: rgba(255, 211, 126, .58);
    background:
        linear-gradient(180deg, rgba(255, 211, 126, .10), transparent 44%),
        linear-gradient(135deg, rgba(255, 211, 126, .10), rgba(8, 24, 45, .68));
    box-shadow: inset 3px 0 0 rgba(255, 211, 126, .34), inset 0 0 14px rgba(255, 211, 126, .045);
}

.sticky-activity-card.achievement.changed {
    border-color: rgba(255, 211, 126, 0.86);
    background: linear-gradient(135deg, rgba(255, 211, 126, 0.14), rgba(18, 51, 84, 0.86));
    box-shadow: 0 0 26px rgba(255, 211, 126, 0.24), inset 3px 0 0 rgba(255, 211, 126, .44), inset 0 0 22px rgba(255, 211, 126, 0.08);
    animation: stickyAchievementPulse 1.2s ease-out 2;
}

.sticky-activity-card.achievement.changed::before {
    content: "";
    position: absolute;
    inset: -70% -30%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, transparent 60%);
    transform: translateX(-40%);
    animation: stickyAchievementSweep 1.5s ease-out;
    pointer-events: none;
}

.sticky-activity-label {
    color: rgba(126, 223, 255, 0.82);
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-activity-card.tone-credit .sticky-activity-label { color: rgba(129, 255, 195, .84); }
.sticky-activity-card.tone-redemption .sticky-activity-label { color: rgba(255, 138, 61, .82); }
.sticky-activity-card.achievement .sticky-activity-label { color: rgba(255, 211, 126, .84); }

.sticky-activity-label,
.sticky-activity-title,
.sticky-activity-sub {
    width: 100%;
    text-align: center;
}

.sticky-activity-title {
    margin-top: 2px;
    color: var(--text);
    font-size: 10px;
    line-height: 1.1;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-activity-card.tone-credit .sticky-activity-title { color: var(--success); text-shadow: 0 0 10px rgba(129, 255, 195, 0.12); }
.sticky-activity-card.tone-redemption .sticky-activity-title { color: #ff8a3d; text-shadow: 0 0 10px rgba(255, 138, 61, 0.12); }
.sticky-activity-card.achievement .sticky-activity-title { color: #ffe08c; text-shadow: 0 0 10px rgba(255, 211, 126, 0.12); }

.sticky-activity-sub {
    margin-top: 1px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes stickyAchievementPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes stickyAchievementSweep { from { transform: translateX(-48%); opacity: .9; } to { transform: translateX(80%); opacity: 0; } }

@media (max-width: 1320px) { .sticky-activity-sub { display: none; } }

@media (max-width: 760px) {
    .sticky-viewer-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .sticky-hud-pill { min-height: 33px; padding: 4px 5px; border-radius: 10px; border-width: 1.5px; background: linear-gradient(180deg, rgba(8, 24, 45, .70), rgba(8, 24, 45, .48)); }
    .sticky-hud-pill.available { border-color: rgba(129, 255, 195, .40); background: linear-gradient(180deg, rgba(129, 255, 195, .09), rgba(8, 24, 45, .54)); }
    .sticky-hud-label { font-size: 7px; letter-spacing: .11em; }
    .sticky-hud-value { font-size: 9px; }
    .sticky-hud-pill.available .sticky-hud-value { font-size: 10px; }
    #sticky-hud-rank .sticky-rank-badge, .sticky-hud-pill.has-standing-medal #sticky-hud-standing .sticky-standing-medal { left: 5px; width: 20px; height: 20px; min-width: 20px; }
    #sticky-hud-rank .sticky-rank-badge img, #sticky-hud-standing .sticky-standing-medal img { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; }
    #sticky-hud-rank .sticky-hud-rank-text, #sticky-hud-standing .sticky-standing-text { padding: 0 18px; }
    .sticky-activity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .sticky-activity-card { display: grid; align-content: center; justify-content: center; justify-items: center; gap: 1px; min-height: 35px; padding: 4px 5px; border-radius: 10px; border-width: 1.5px; text-align: center; }
    .sticky-activity-label { font-size: 7px; line-height: 1; letter-spacing: .11em; text-align: center; width: 100%; }
    .sticky-activity-title { font-size: 8.5px; line-height: 1.08; margin-top: 0; text-align: center; width: 100%; }
    .sticky-activity-sub { display: none; }
    .sticky-nav-card { cursor: pointer; }
}

@media (max-width: 480px) {
    .sticky-hud-label {
        font-size: 6.5px;
        letter-spacing: .07em;
    }

    .sticky-hud-value {
        font-size: 8.6px;
    }

    .sticky-hud-pill.available .sticky-hud-value {
        font-size: 9.4px;
    }

    #sticky-hud-rank .sticky-hud-rank-text,
    #sticky-hud-standing .sticky-standing-text {
        padding: 0 16px;
    }

    .sticky-activity-label {
        font-size: 6.4px;
        letter-spacing: .055em;
    }

    .sticky-activity-title {
        font-size: 8px;
    }
}

@media (min-width: 1181px) and (max-width: 1320px),
       (min-width: 761px) and (max-width: 1180px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape) {
    #sticky-hud-rank .sticky-rank-badge,
    .sticky-hud-pill.has-standing-medal #sticky-hud-standing .sticky-standing-medal {
        display: none !important;
    }

    #sticky-hud-rank .sticky-hud-rank-text,
    #sticky-hud-standing .sticky-standing-text {
        padding: 0 2px !important;
        text-align: center;
    }
}