/* Shared by everything social on the site (community feeds, comments): the avatar circle, the spoiler cover,
 * the reaction ovals and the reaction popup. */

.fp-av{position:relative; width:42px; height:42px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; font:700 17px/1 'Sora',sans-serif; overflow:hidden; flex:none;}
.fp-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.fp-reveal{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(14,27,46,.35); border:0; border-radius:12px; color:#fff; cursor:pointer; font:inherit;}
.fp-reveal span{font:700 15px/1.2 'Inter',sans-serif;}
.fp-reveal small{font-size:12.5px; opacity:.85;}
.fp-reveal:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

.fp-rstack{display:inline-flex;}
.fp-rstack .rx + .rx{margin-inline-start:-6px;}

.fp-picker{position:absolute; inset-inline-start:0; bottom:calc(100% + 6px); z-index:30; display:flex; gap:4px; padding:7px; background:var(--white); border:1px solid var(--border-soft); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.28);}
.fp-picker[hidden]{display:none;}
.fp-pick{border:0; background:transparent; padding:3px; border-radius:50%; cursor:pointer; transition:transform .12s;}
.fp-pick:hover,.fp-pick:focus-visible{transform:translateY(-4px) scale(1.14);}
.fp-pick:focus-visible{outline:2px solid var(--blue);}
.fp-pick.is-on{box-shadow:0 0 0 2px var(--blue); }

/* The reaction pictures sit on the same oval the app draws (ReactionBackgroundDrawable): a radial colour that
 * darkens toward the edge, a soft shadow low on the right, a light arc on the upper left and a thin dark rim. */
.rx{--s:24px; --rx:#F7B928; --rxd:color-mix(in srgb, var(--rx) 40%, rgb(38 20 10) 60%);
    position:relative; display:inline-grid; place-items:center; flex:none; width:var(--s); height:var(--s); border-radius:50%;
    background:radial-gradient(circle closest-side, var(--rx) 44%, var(--rxd) 110%);
    box-shadow:inset 0 0 0 calc(var(--s) * .03) rgb(38 20 10 / .55); line-height:1;}
.rx::before{content:""; position:absolute; z-index:0; left:20%; right:12%; top:68%; height:42%; border-radius:50%;
    background:radial-gradient(closest-side, rgb(38 20 10 / .29), transparent); pointer-events:none;}
.rx::after{content:""; position:absolute; z-index:0; inset:6.5%; border-radius:50%; pointer-events:none;
    background:conic-gradient(from 0deg, rgb(255 255 255 / .92) 0deg, rgb(255 214 150 / .82) 49deg, transparent 70deg, transparent 290deg, rgb(255 214 150 / .82) 311deg, rgb(255 255 255 / .92) 360deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%)); mask:radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%));}
.rx img,.rx .rx-e{position:relative; z-index:1;}
.rx img{width:90%; height:90%; object-fit:contain; display:block;}
.rx-1 img,.rx-2 img{width:84%; height:84%;}
.rx-3 img{width:76%; height:76%;}
.rx-5 img{width:78%; height:78%;}
.rx .rx-e{display:none; font-size:calc(var(--s) * .55); line-height:1;}
.rx.no-img .rx-e{display:block;}
.rx.sm{--s:20px; margin:0;}
.fp-rstack .rx{box-shadow:inset 0 0 0 calc(var(--s) * .03) rgb(38 20 10 / .55), 0 0 0 2px var(--white);}
.rx.md{--s:26px;}
.rx.lg{--s:40px;}
/* the app's reaction colours (colors.xml) */
.rx-1,.rb-1{--rx:#1877F2;--rxt:#fff;} .rx-2,.rb-2{--rx:#E0495D;--rxt:#fff;} .rx-3,.rb-3{--rx:#FFDB4D;--rxt:#3a2a00;} .rx-4,.rb-4{--rx:#1AC6FF;--rxt:#032a38;}
.rx-5,.rb-5{--rx:#669999;--rxt:#fff;} .rx-6,.rb-6{--rx:#996633;--rxt:#fff;} .rx-7,.rb-7{--rx:#E0495D;--rxt:#fff;} .rx-8,.rb-8{--rx:#FF9966;--rxt:#3a1800;}
/* default Like: just the icon, no oval, in the text colour */
.rx-plain{width:22px; height:22px; flex:none; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;}