/* GRAND EXILE desktop — brand mascots (Yiyi, Obol): sprite slots, perches and the collar tag. */
.mascot{display:inline-block;line-height:0;border-radius:6px;cursor:var(--cur-link,pointer)}
.mascot canvas{display:block;image-rendering:pixelated}
/* perch: sits on the top edge of its (positioned) parent; --hang lets the tail drop over it */
.mascot.perch{position:absolute;right:22px;bottom:100%;margin-bottom:calc(-1*var(--hang,0px));z-index:1}
/* left of the first-visit note (330px wide at the screen's right edge), which slides in over this spot */
.win>.mascot.perch{right:310px}
.win[data-app=home] .wc{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.mascot-card{position:relative}
.person .aka{color:var(--mute);font-weight:400}
#dock .mascot{align-self:flex-end;margin:0 2px 0 8px}
.box>.mascot{position:absolute;right:14px;bottom:10px}
/* Obol's bag rests on the lead card: cancel the column gap between them */
.mm-side>.mascot{align-self:flex-end;margin:auto 18px -20px 0}
.mm-side>.mascot+.mm-founder{margin-top:0}
.nf{position:relative;height:100%}
.nf>.mascot{position:absolute;right:26px;bottom:22px}
.nf .nf-cat{display:block;color:var(--mute);margin-top:8px}
.boot-track{position:relative;width:176px}
.boot-track>.mascot{position:absolute;left:0;bottom:100%;margin-bottom:2px;pointer-events:none}
.stroller{position:fixed;left:0;bottom:70px;z-index:55;pointer-events:none}
/* above the collar tag (z 95): a heart rises through the space the tag occupies */
.mpuff{position:fixed;z-index:96;pointer-events:none;image-rendering:pixelated}

#mtag{position:fixed;z-index:95;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;white-space:nowrap;
  background:var(--win);border:1px solid var(--line2);box-shadow:var(--shadow);font:11px var(--px);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s linear,visibility .15s}
#mtag.on{opacity:1;visibility:visible}
#mtag b{font-weight:400;color:var(--teal)}
#mtag span::before{content:'· ';color:var(--mute)}

@media (max-width:720px){
  .win>.mascot.perch{display:none}
  #mtag{white-space:normal;flex-wrap:wrap;max-width:calc(100vw - 16px)}
}