/* QK avatar frames: square thumbs. Light runs the edge. No rotate. */

@property --qk-frame-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes qk-frame-orbit {
    to { --qk-frame-angle: 360deg; }
}

.avatar-frame-wrap {
    --qk-frame-radius: 6px;
    --qk-frame-thick: 2px;
    --qk-frame-a: #c4b5fd;
    --qk-frame-b: #a78bfa;
    --qk-frame-c: #e2e8f0;
    --qk-frame-line: rgba(226, 232, 240, .42);
    --qk-frame-glow: rgba(167, 139, 250, .18);
    --qk-frame-orbit: 9s;
    --qk-corner: 6px;
    --qk-corner-w: 1.5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    isolation: isolate;
    overflow: visible;
    border-radius: calc(var(--qk-frame-radius) + 1px);
}

.avatar-frame-wrap img {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: var(--qk-frame-radius);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .42);
}

.avatar-frame-ring {
    display: none;
}

.has-frame .avatar-frame-ring {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: inherit;
    padding: var(--qk-frame-thick);
    transform: none !important;
    rotate: none !important;
    animation: none;
    background: conic-gradient(
        from var(--qk-frame-angle, 0deg),
        var(--qk-frame-line) 0deg 268deg,
        var(--qk-frame-a) 292deg,
        #fff 314deg,
        var(--qk-frame-b) 334deg,
        var(--qk-frame-line) 352deg 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.has-frame {
    box-sizing: content-box;
    padding: var(--qk-frame-thick) !important;
    overflow: visible;
    box-shadow: 0 0 0 1px var(--qk-frame-line), 0 0 8px var(--qk-frame-glow);
}

.has-frame.frame-monthly-1::before,
.has-frame.frame-overall-1::before,
.has-frame.frame-monthly-2::before,
.has-frame.frame-overall-2::before,
.has-frame.frame-monthly-3::before,
.has-frame.frame-overall-3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    transform: none !important;
    rotate: none !important;
    filter: drop-shadow(0 0 4px var(--qk-frame-glow));
    background:
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top left / var(--qk-corner) var(--qk-corner-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top left / var(--qk-corner-w) var(--qk-corner) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top right / var(--qk-corner) var(--qk-corner-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top right / var(--qk-corner-w) var(--qk-corner) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom left / var(--qk-corner) var(--qk-corner-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom left / var(--qk-corner-w) var(--qk-corner) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom right / var(--qk-corner) var(--qk-corner-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom right / var(--qk-corner-w) var(--qk-corner) no-repeat;
}

.has-frame.frame-monthly-1::after,
.has-frame.frame-overall-1::after,
.has-frame.frame-monthly-2::after,
.has-frame.frame-overall-2::after,
.has-frame.frame-monthly-3::after,
.has-frame.frame-overall-3::after {
    display: none;
}

/* Rank 1: dual lights, 4-corner feel, strongest glow. */
.frame-monthly-1,
.frame-overall-1 {
    --qk-frame-thick: 2.5px;
    --qk-frame-orbit: 4.8s;
    --qk-corner: 9px;
    --qk-corner-w: 2px;
}

.frame-monthly-1 {
    --qk-frame-a: #db2777;
    --qk-frame-b: #f97316;
    --qk-frame-c: #fde68a;
    --qk-frame-line: rgba(251, 146, 60, .86);
    --qk-frame-glow: rgba(244, 114, 182, .5);
}

.frame-overall-1 {
    --qk-frame-a: #fbbf24;
    --qk-frame-b: #dc2626;
    --qk-frame-c: #fef3c7;
    --qk-frame-line: rgba(251, 191, 36, .88);
    --qk-frame-glow: rgba(220, 38, 38, .46);
}

.frame-monthly-1,
.frame-overall-1 {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--qk-frame-c) 70%, transparent),
        0 0 10px var(--qk-frame-glow),
        0 0 18px var(--qk-frame-glow);
}

.frame-monthly-1 .avatar-frame-ring,
.frame-overall-1 .avatar-frame-ring {
    animation: qk-frame-orbit var(--qk-frame-orbit) linear infinite;
    background: conic-gradient(
        from var(--qk-frame-angle, 0deg),
        var(--qk-frame-line) 0deg 12deg,
        var(--qk-frame-a) 24deg,
        #fff 36deg,
        var(--qk-frame-b) 48deg,
        var(--qk-frame-line) 62deg 132deg,
        var(--qk-frame-a) 144deg,
        #fff 156deg,
        var(--qk-frame-b) 168deg,
        var(--qk-frame-line) 182deg 252deg,
        var(--qk-frame-a) 264deg,
        #fff 276deg,
        var(--qk-frame-b) 288deg,
        var(--qk-frame-line) 302deg 360deg
    );
}

.has-frame.frame-monthly-1::before,
.has-frame.frame-overall-1::before {
    filter: drop-shadow(0 0 6px var(--qk-frame-glow));
}

/* Rank 2: two lights, slower, smaller corners. */
.frame-monthly-2,
.frame-overall-2 {
    --qk-frame-thick: 2.2px;
    --qk-frame-orbit: 5.4s;
    --qk-corner: 7px;
    --qk-corner-w: 1.75px;
}

.frame-monthly-2 {
    --qk-frame-a: #4338ca;
    --qk-frame-b: #22d3ee;
    --qk-frame-c: #e0f2fe;
    --qk-frame-line: rgba(56, 189, 248, .92);
    --qk-frame-glow: rgba(34, 211, 238, .36);
}

.frame-overall-2 {
    --qk-frame-a: #f472b6;
    --qk-frame-b: #fde68a;
    --qk-frame-c: #fae8ff;
    --qk-frame-line: rgba(244, 114, 182, .92);
    --qk-frame-glow: rgba(253, 224, 138, .3);
}

.frame-monthly-2,
.frame-overall-2 {
    box-shadow:
        0 0 0 1px var(--qk-frame-line),
        0 0 10px var(--qk-frame-glow);
}

.has-frame.frame-monthly-2 .avatar-frame-ring,
.has-frame.frame-overall-2 .avatar-frame-ring {
    animation: qk-frame-orbit var(--qk-frame-orbit) linear infinite;
    background: conic-gradient(
        from var(--qk-frame-angle, 0deg),
        var(--qk-frame-line) 0deg 10deg,
        var(--qk-frame-a) 16deg,
        #fff 21deg,
        var(--qk-frame-b) 28deg,
        var(--qk-frame-line) 38deg 190deg,
        var(--qk-frame-a) 196deg,
        #fff 201deg,
        var(--qk-frame-b) 208deg,
        var(--qk-frame-line) 218deg 360deg
    );
}

/* Rank 3: one light, still moving, quiet metal. */
.frame-monthly-3,
.frame-overall-3 {
    --qk-frame-thick: 1.9px;
    --qk-frame-orbit: 6.8s;
    --qk-corner: 6px;
    --qk-corner-w: 1.5px;
}

.frame-monthly-3 {
    --qk-frame-a: #a78bfa;
    --qk-frame-b: #f472b6;
    --qk-frame-c: #e9d5ff;
    --qk-frame-line: rgba(167, 139, 250, .9);
    --qk-frame-glow: rgba(244, 114, 182, .22);
}

.frame-overall-3 {
    --qk-frame-a: #22d3ee;
    --qk-frame-b: #67e8f9;
    --qk-frame-c: #a5f3fc;
    --qk-frame-line: rgba(34, 211, 238, .9);
    --qk-frame-glow: rgba(103, 232, 249, .22);
}

.has-frame.frame-monthly-3 .avatar-frame-ring,
.has-frame.frame-overall-3 .avatar-frame-ring {
    animation: qk-frame-orbit var(--qk-frame-orbit) linear infinite;
    background: conic-gradient(
        from var(--qk-frame-angle, 0deg),
        var(--qk-frame-line) 0deg 10deg,
        var(--qk-frame-a) 16deg,
        #fff 21deg,
        var(--qk-frame-b) 28deg,
        var(--qk-frame-line) 38deg 360deg
    );
}

.has-frame[class*="frame-realm-"] {
    --qk-frame-thick: 1.7px;
    --qk-frame-orbit: 10s;
    --qk-corner: 0px;
    --qk-corner-w: 0px;
}

.has-frame[class*="frame-realm-"] .avatar-frame-ring {
    animation: none;
    background: linear-gradient(var(--qk-frame-line), var(--qk-frame-a) 42%, var(--qk-frame-b));
}

.frame-realm-nguyen-anh {
    --qk-frame-a: #fbbf24;
    --qk-frame-b: #fb7185;
    --qk-frame-c: #fde68a;
    --qk-frame-line: rgba(245, 158, 11, .74);
    --qk-frame-glow: rgba(251, 191, 36, .26);
}

.frame-realm-hoa-than {
    --qk-frame-a: #fb7185;
    --qk-frame-b: #7c3aed;
    --qk-frame-c: #fecdd3;
    --qk-frame-line: rgba(251, 113, 133, .72);
    --qk-frame-glow: rgba(190, 18, 60, .26);
    --qk-frame-orbit: 9.4s;
}

.frame-realm-luyen-hu {
    --qk-frame-a: #7c3aed;
    --qk-frame-b: #22d3ee;
    --qk-frame-c: #ddd6fe;
    --qk-frame-line: rgba(109, 40, 217, .72);
    --qk-frame-glow: rgba(34, 211, 238, .24);
    --qk-frame-orbit: 8.8s;
    --qk-frame-thick: 1.8px;
}

.frame-realm-hop-the {
    --qk-frame-a: #22d3ee;
    --qk-frame-b: #2563eb;
    --qk-frame-c: #a5f3fc;
    --qk-frame-line: rgba(14, 116, 144, .74);
    --qk-frame-glow: rgba(34, 211, 238, .28);
    --qk-frame-orbit: 8.4s;
    --qk-frame-thick: 1.85px;
}

.frame-realm-dai-thua {
    --qk-frame-a: #a855f7;
    --qk-frame-b: #db2777;
    --qk-frame-c: #e9d5ff;
    --qk-frame-line: rgba(168, 85, 247, .76);
    --qk-frame-glow: rgba(219, 39, 119, .26);
    --qk-frame-orbit: 8s;
    --qk-frame-thick: 1.95px;
}

.frame-realm-do-kiep,
.frame-realm-cao-thu {
    --qk-frame-a: #facc15;
    --qk-frame-b: #7c3aed;
    --qk-frame-c: #fef08a;
    --qk-frame-line: rgba(250, 204, 21, .8);
    --qk-frame-glow: rgba(124, 58, 237, .24);
    --qk-frame-orbit: 7.6s;
    --qk-frame-thick: 2px;
}

.frame-vip {
    --qk-frame-a: #7dd3fc;
    --qk-frame-b: #facc15;
    --qk-frame-c: #e0f2fe;
    --qk-frame-line: rgba(56, 189, 248, .82);
    --qk-frame-glow: rgba(250, 204, 21, .28);
    --qk-frame-thick: 1.7px;
    --qk-corner: 0px;
    --qk-corner-w: 0px;
}

.frame-vip .avatar-frame-ring {
    animation: none;
    background: linear-gradient(135deg, var(--qk-frame-a), #fff 46%, var(--qk-frame-b));
}

.gmsg-avatar-link {
    --qk-frame-radius: 4px;
    --qk-corner: 5px;
}

.gmsg-avatar-link.has-frame {
    overflow: visible !important;
}

.gmsg-avatar-link.frame-monthly-1,
.gmsg-avatar-link.frame-overall-1 {
    --qk-frame-thick: 2px;
    --qk-corner: 6px;
}

.gmsg-avatar-link.frame-monthly-2,
.gmsg-avatar-link.frame-overall-2 {
    --qk-frame-thick: 1.75px;
    --qk-corner: 5px;
}

.gmsg-avatar-link.frame-monthly-3,
.gmsg-avatar-link.frame-overall-3 {
    --qk-frame-thick: 1.5px;
    --qk-corner: 4px;
}

.gmsg-avatar-link[class*="frame-realm-"],
.gmsg-avatar-link.frame-vip {
    --qk-frame-thick: 1.4px;
}

.qk-frame-lite,
.gmsg-avatar-link.has-frame {
    --qk-frame-radius: 6px;
    --qk-frame-thick: 1.5px;
    --qk-corner: 6px;
    --qk-corner-w: 1.5px;
    border-radius: 6px;
}

.qk-frame-lite.frame-monthly-1,
.qk-frame-lite.frame-overall-1,
.gmsg-avatar-link.frame-monthly-1,
.gmsg-avatar-link.frame-overall-1 {
    --qk-frame-thick: 1.6px;
    --qk-corner: 7px;
    --qk-corner-w: 1.6px;
}

.qk-frame-lite.frame-monthly-2,
.qk-frame-lite.frame-overall-2,
.gmsg-avatar-link.frame-monthly-2,
.gmsg-avatar-link.frame-overall-2 {
    --qk-frame-thick: 1.5px;
    --qk-corner: 6px;
    --qk-corner-w: 1.5px;
}

.qk-frame-lite.frame-monthly-3,
.qk-frame-lite.frame-overall-3,
.gmsg-avatar-link.frame-monthly-3,
.gmsg-avatar-link.frame-overall-3 {
    --qk-frame-thick: 1.4px;
    --qk-corner: 5px;
    --qk-corner-w: 1.4px;
}

.qk-frame-lite img,
.gmsg-avatar-link.has-frame img {
    border-radius: var(--qk-frame-radius) !important;
    box-shadow: none;
}

.qk-frame-lite .avatar-frame-ring,
.gmsg-avatar-link.has-frame .avatar-frame-ring {
    border-radius: 6px;
}


.avatar-frame-wrap.user-show-avatar {
    --qk-frame-radius: 9px;
    --qk-frame-thick: 3px;
    --qk-corner: 16px;
    --qk-corner-w: 3px;
    display: block;
    width: 100%;
    line-height: 0;
    box-sizing: border-box;
    border-radius: 0.75rem;
    overflow: hidden;
}

.avatar-frame-wrap.user-show-avatar.has-frame {
    box-sizing: border-box;
    overflow: hidden;
}

.avatar-frame-wrap.user-show-avatar img {
    display: block;
    width: 100%;
    border-radius: calc(0.75rem - var(--qk-frame-thick));
}

.avatar-frame-wrap.user-show-avatar .avatar-frame-ring {
    border-radius: inherit;
}

.user-show-avatar.frame-monthly-2,
.user-show-avatar.frame-overall-2 {
    --qk-frame-thick: 2.6px;
    --qk-corner: 13px;
    --qk-corner-w: 2.5px;
}

.user-show-avatar.frame-monthly-3,
.user-show-avatar.frame-overall-3 {
    --qk-frame-thick: 2.2px;
    --qk-corner: 11px;
    --qk-corner-w: 2px;
}

.user-show-avatar[class*="frame-realm-"],
.user-show-avatar.frame-vip {
    --qk-frame-thick: 2.2px;
}


@media (max-width: 768px) {
    .frame-monthly-1,
    .frame-overall-1 {
        --qk-frame-orbit: 6.2s;
    }

    .frame-monthly-2,
    .frame-overall-2 {
        --qk-frame-orbit: 6.4s;
    }

    .frame-monthly-3,
    .frame-overall-3 {
        --qk-frame-orbit: 7.8s;
    }

    .has-frame[class*="frame-realm-"] {
        --qk-frame-orbit: 12s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .has-frame .avatar-frame-ring {
        animation: none !important;
    }
}