/*
 * Avatar frames with a tier (includes/frames.php): the dearer the frame, the richer it looks.
 *   common    thin ring
 *   rare      soft coloured glow
 *   epic      stronger glow + slow shimmer + tier tag
 *   legendary animated gold / violet halo + sparkle + tier tag
 * .nsav is the new avatar piece (dizzy_avatar_html); [data-ftier] is put on the older frame markup by frames.js.
 */
.nsav { position: relative; display: inline-block; width: var(--nsav, 56px); height: var(--nsav, 56px); flex: 0 0 auto; vertical-align: middle; isolation: isolate; }
.nsav__img { position: relative !important; z-index: 1; width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; display: block; background: #1b1b2e; }
.nsav__frame { position: absolute !important; z-index: 2; left: -18% !important; top: -18% !important; width: 136% !important; height: 136% !important; max-width: none !important; object-fit: contain; pointer-events: none; border-radius: 0 !important; }
.nsav--framed::before { content: ""; position: absolute; z-index: 0; inset: -7%; border-radius: 50%; pointer-events: none; opacity: 0; }

.nsav--common .nsav__img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }

.nsav--rare::before { opacity: 1; background: radial-gradient(circle, rgba(120, 190, 255, .55), rgba(120, 190, 255, 0) 70%); filter: blur(4px); }
.nsav--rare .nsav__frame { filter: drop-shadow(0 0 4px rgba(120, 190, 255, .8)); }

.nsav--epic::before { opacity: 1; inset: -12%; background: conic-gradient(from 0deg, #a678ff, #ff6ad5, #6ad0ff, #a678ff); filter: blur(7px); animation: nsavSpin 6s linear infinite; }
.nsav--epic .nsav__frame { filter: drop-shadow(0 0 5px rgba(166, 120, 255, .9)) drop-shadow(0 0 10px rgba(255, 106, 213, .5)); }

.nsav--legendary::before { opacity: 1; inset: -16%; background: conic-gradient(from 0deg, #ffd45a, #ff9a3c, #ff6ad5, #a678ff, #ffd45a); filter: blur(9px); animation: nsavSpin 4s linear infinite; }
.nsav--legendary .nsav__frame { filter: drop-shadow(0 0 6px rgba(255, 212, 90, .95)) drop-shadow(0 0 14px rgba(255, 154, 60, .6)); animation: nsavPulse 2.6s ease-in-out infinite; }
.nsav--legendary::after { content: "✦"; position: absolute; z-index: 3; right: -6%; top: -6%; font-size: calc(var(--nsav, 56px) * .26); line-height: 1; color: #fff3b8; text-shadow: 0 0 8px #ffd45a; animation: nsavTwinkle 1.8s ease-in-out infinite; pointer-events: none; }

.nsav__tag { position: absolute; z-index: 4; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font: 800 9.5px/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient(120deg, #a678ff, #ff6ad5); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.nsav--legendary .nsav__tag { color: #3a2400; background: linear-gradient(120deg, #ffe9a0, #ffc23c); }

@keyframes nsavSpin { to { transform: rotate(360deg); } }
@keyframes nsavPulse { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 212, 90, .85)) drop-shadow(0 0 10px rgba(255, 154, 60, .5)); } 50% { filter: drop-shadow(0 0 9px rgba(255, 232, 140, 1)) drop-shadow(0 0 20px rgba(255, 154, 60, .8)); } }
@keyframes nsavTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* the older frame markup (posts, creator lists, products): the same look as a glow on the frame picture */
[data-ftier="rare"] img { filter: drop-shadow(0 0 4px rgba(120, 190, 255, .8)); }
[data-ftier="epic"] img { filter: drop-shadow(0 0 5px rgba(166, 120, 255, .9)) drop-shadow(0 0 10px rgba(255, 106, 213, .5)); }
[data-ftier="legendary"] img { filter: drop-shadow(0 0 6px rgba(255, 212, 90, .95)) drop-shadow(0 0 14px rgba(255, 154, 60, .6)); animation: nsavPulse 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .nsav--epic::before, .nsav--legendary::before, .nsav--legendary .nsav__frame, .nsav--legendary::after, [data-ftier="legendary"] img { animation: none; }
}

/* admin unlock control inside a lock, and the banner on an opened post (includes/admin_unlock.php, js/adminUnlock.js) */
.admin_unlock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px auto 0; padding: 10px 12px; max-width: 420px; border-radius: 14px; background: rgba(17, 17, 32, .9); border: 1px dashed rgba(255, 106, 213, .55); color: #eef0f8; font: 600 13px/1.3 system-ui, sans-serif; position: relative; z-index: 5; }
.admin_unlock__note, .admin_unlock--open span { flex: 1 1 100%; color: #cfd2e4; }
.admin_unlock button { appearance: none; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 11px; color: #fff; background: linear-gradient(120deg, #a678ff, #ff6ad5); font: inherit; }
.admin_unlock__form { display: flex; flex: 1 1 100%; gap: 8px; }
.admin_unlock__form[hidden] { display: none; }
.admin_unlock__reason { flex: 1 1 auto; min-width: 0; padding: 9px 11px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; }
.admin_unlock__msg { flex: 1 1 100%; color: #9fe3b4; }
.admin_unlock__msg.is-bad { color: #ff8a9b; }
.admin_unlock--open { border-style: solid; border-color: rgba(120, 220, 160, .6); max-width: none; margin: 0 0 10px; }

/* profile page: the tier of the frame the member wears, as a label under the avatar (layouts/profile/profile_infos.php) */
.frame_tier_badge { position: absolute; z-index: 6; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font: 800 10.5px/1.3 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient(120deg, #6aa8ff, #7a8cff); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.frame_tier_badge--epic { background: linear-gradient(120deg, #a678ff, #ff6ad5); }
.frame_tier_badge--legendary { color: #3a2400; background: linear-gradient(120deg, #ffe9a0, #ffc23c); }

/* live room: a framed avatar and a tier-coloured name in the chat, the frame on gift pop-ups, the host's framed avatar in the header */
.lv_av { margin: 0 8px 0 2px; flex: 0 0 auto; align-self: center; }
.dizzy_live_page .lv_nm--rare { color: #8fc4ff !important; }
.dizzy_live_page .lv_nm--epic { background: linear-gradient(120deg, #c9a8ff, #ff8adf); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; font-weight: 800; }
.dizzy_live_page .lv_nm--legendary { background: linear-gradient(120deg, #fff1b0, #ffc23c, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; font-weight: 800; text-shadow: none; }
.dizzy_live_page .lv_t_av { position: relative; overflow: visible; }
.dizzy_live_page .lv_t_av .nsav__frame { z-index: 3; }
.dizzy_live_page .lv_t_av--rare { box-shadow: 0 0 8px rgba(120, 190, 255, .8); }
.dizzy_live_page .lv_t_av--epic { box-shadow: 0 0 10px rgba(166, 120, 255, .9), 0 0 18px rgba(255, 106, 213, .5); }
.dizzy_live_page .lv_t_av--legendary { box-shadow: 0 0 12px rgba(255, 212, 90, .95), 0 0 24px rgba(255, 154, 60, .6); }
.dizzy_live_page .live_creator_avatar_live .nsav { --nsav: 44px; }
.dizzy_live_page .live_creator_avatar_live .nsav__frame { z-index: 3; }
/* the live room has its own "img { width: 100% !important }" rules for the header avatar: a more specific rule keeps the frame its size around the face */
.dizzy_live_page .live_creator_avatar_live .nsav > img.nsav__frame { position: absolute !important; left: -18% !important; top: -18% !important; width: 136% !important; height: 136% !important; max-width: none !important; object-fit: contain !important; border-radius: 0 !important; margin: 0 !important; }
.dizzy_live_page .live_creator_avatar_live .nsav > img.nsav__img { position: relative !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; }
/* messenger: the round box of a conversation avatar lets the frame (a little larger than the picture) out; the picture itself stays round */
.i_message_avatar--framed, .conversation_avatar--framed { overflow: visible !important; background: none !important; display: flex; align-items: center; justify-content: center; }
.i_message_avatar--framed .nsav, .conversation_avatar--framed .nsav { margin: 0; }
/* messenger bubbles: the small avatar badge of a member who wears a frame gets a ring in the frame's tier colour */
.msg_o_avatar--common { border-color: rgba(255, 255, 255, .9) !important; }
.msg_o_avatar--rare { border-color: #78beff !important; box-shadow: 0 0 6px rgba(120, 190, 255, .8); }
.msg_o_avatar--epic { border-color: #b98cff !important; box-shadow: 0 0 7px rgba(166, 120, 255, .9), 0 0 12px rgba(255, 106, 213, .5); }
.msg_o_avatar--legendary { border-color: #ffd45a !important; box-shadow: 0 0 8px rgba(255, 212, 90, .95), 0 0 14px rgba(255, 154, 60, .6); }