/* TempoLock R483: framed avatars on the site. TLAvatar.decorate() adds a <tl-avatar class="tl-ov"> over an
   existing avatar element when a frame is equipped, and a small heart for supporters. */
tl-avatar{display:inline-block;width:52px;height:52px}
[data-tl-frame]{position:relative!important;overflow:visible!important;isolation:isolate}
/* the frame replaces the avatar's own border and background; its own artwork hides behind the framed one */
html body [data-tl-frame],html body .tlh .tlh-avatar[data-tl-frame],html body #avatar.avatar[data-tl-frame],html body .boardAvatar[data-tl-frame]{border-color:transparent!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important}
html body [data-tl-frame]>:not(tl-avatar):not(.tl-heart){visibility:hidden!important}
html body [data-tl-frame]>tl-avatar.tl-ov{position:absolute!important;inset:-16%!important;width:auto!important;height:auto!important;z-index:1;pointer-events:none;margin:0!important}
/* Soundwave bars reach ~30% of the avatar's width past each side: keep that space free so they never cover text */
html body [data-tl-frame=soundwave],html body .tlh .tlh-avatar[data-tl-frame=soundwave],html body #avatar.avatar[data-tl-frame=soundwave],html body .boardAvatar[data-tl-frame=soundwave]{margin-left:calc(var(--tl-av-w,32px)*.3)!important;margin-right:calc(var(--tl-av-w,32px)*.3)!important}
html body .tlh .tlh-player[data-tl-side-room]{column-gap:calc(8px + var(--tl-av-w,32px)*.3)!important}
html body .tlh .tlh-player[data-tl-side-room]>.tlh-avatar[data-tl-frame=soundwave]{margin:0!important}
/* public profile: the owner's edit pencil sits bottom-left above the frame, the supporter heart keeps bottom-right */
html body #avatar.avatar.can-edit:is([data-tl-frame],[data-tl-heart])::after{right:auto!important;left:-8px!important;z-index:5!important}
/* supporter heart on an avatar without a premium frame */
html body [data-tl-heart],html body .tlh .tlh-avatar[data-tl-heart]{position:relative!important;overflow:visible!important}
.tl-heart{position:absolute;z-index:3;right:-4px;bottom:-4px;width:42%;height:42%;min-width:10px;min-height:10px;max-width:18px;max-height:18px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3b2a1a,#120c07);border:1px solid #e3a84c;box-shadow:0 0 0 1.5px #0e0d10;pointer-events:none;visibility:visible!important}
.tl-heart svg{width:62%;height:62%;fill:#ffcf6a}
/* the old R481 heart badge is replaced by .tl-heart */
#tlSupporterBadge{display:none!important}
/* page scroll lock while the avatar picker is open */
html.tlp-open,html.tlp-open body{overflow:hidden!important}

/* R540 Supporter tooltip: hover, keyboard focus and touch work on both framed and classic avatars. */
html body [data-tl-frame] > .tl-supporter-hit.tl-supporter-hit{visibility:visible!important}
.tl-supporter-hit{position:absolute;right:-8px;bottom:-8px;width:28px;height:28px;z-index:9;cursor:pointer;display:block;border-radius:50%;background:transparent;pointer-events:auto;outline-offset:1px}
.tl-supporter-hit:focus-visible{outline:2px solid #ffcb77}
.tl-supporter-popup{position:fixed;z-index:2147480000;box-sizing:border-box;min-width:205px;max-width:min(275px,calc(100vw - 16px));width:240px;padding:12px 14px;border-radius:12px;border:1px solid #e2b778;background:#1b1714;color:#fff5e6;box-shadow:0 14px 34px #000a;font:13px/1.5 system-ui,sans-serif;text-align:left;}
.tl-supporter-popup[hidden]{display:none!important}
.tl-supporter-popup-title{display:block;color:#ffcf91;margin-bottom:6px;font-size:13px}
.tl-supporter-popup a{color:#ffd6a2;text-decoration:underline;font-weight:700;display:block;padding:5px 0;}

/* R546: verified supporter heart stays visible above animated leaderboard frames.
   Keep the touch/keyboard tooltip hit target unobstructed. */
html body .boardAvatar[data-tl-heart]>.tl-heart{visibility:visible!important;z-index:8!important;right:-5px!important;bottom:-5px!important;width:46%!important;height:46%!important;min-width:11px!important;min-height:11px!important;max-width:16px!important;max-height:16px!important}
html body .boardAvatar>.tl-supporter-hit{z-index:9!important}